table-cell - some kind of colspan?

Question

I am a bit puzzled right now, because I had CSS code that worked, but it wasn\'t beautiful at all. I now want to rework this CSS styles and build them via LESS. And I have b

Answer 1

I found a solution using jquery and table-layout: fixed. Here is my fiddle: http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML:

    

        

            top left cell
        
        

            top right cell
        
    
    

        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        
    
    

        

            bottom left cell
        
        

            bottom right cell
        
    

CSS:

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: table-row;
    border-collapse: collapse;
}

.table-cell {
    display: table-cell;
    padding: 5px;
    border: 1px solid black;
}

.table-cell.colspan {
    display: none;
    /* collapse border */
    margin-top: -1px;
    margin-bottom: -1px;
}

JS:

var rowWidth = $('.table-row:first').width();
var colWidth = $('.table-cell:first').width();
var marginRight = colWidth - rowWidth + 11;
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show()