CSS Hell simulating TABLE with DIV

Question

I´m trying to simulate a table using only CSS and DIV. The problem is that nothing that I do can perfectly simulate a table layout behavior.

Below is the table layout

Answer 1

Here's my attempt. It's probably not perfect, but it's a start. For me, It's working on the newest Chrome, Firefox, Safari, Opera, IE10, and IE9. Sorry, I don't have an IE7 to test with. I doubt it works, as IE7 was hard to deal with.

http://jsfiddle.net/nluis3294/uLuof882/

I think we all agree that you should use tables for tabular data, and divs for non-tabular data. In the ideal world, I think that's what everyone would do.

However, it's also ok to say that I want my non-tabular data to be aligned in a grid and that those rows and columns should stretch like a regular html table. That's a design choice, and it's totally legitimate. That is where the difficulties lie. You can use tables, which are much easier, but technically wrong. Or, you can use divs, and have to rely on tricks like background images, and faux columns, and spacers to get it to look like tables.

Using faux columns doesn't seem "correct" to me either. If you want to change the width of a column, you'd need to edit the background image. And using a background image to set background color seems weird to me. I have similar reservations about other tricks such as Psuedo columns, or tricks regarding negative margins. In my oppinion, they should just change the css to allow a simple way to get something that looks like a grid without tricks.

    

        aa
    
    

        bb

        bbb2
    
    

        cc

        cccc2
    
    

        ffffdffffd

        ffffdffffd
    



    

        aa
    
    

        bb

        bbb2
    
    

        cc

        cccc2
    
    

        ffffdffffd

        ffffdffffd
    




    

        aaa aaa
    
    

        bb

        bbb2

        bbbbbbbbbbbbbbbbbbbb3

    
    

        cccccc


    
    

        ffffffffd

        ffffd
    
  
    

CSS:

div.testTable{
    width: 30%; display: table; table-layout: auto;
    padding:0;
    margin:0;

}

div.testRow{
    display: table-row; width: 100%; 
white-space: nowrap;
    vertical-align:top;
    padding:0;
    margin:0;

}

div.testColumn1{
    display: table-cell; height:100%; min-width: 25%; background-color: #CCD9FF;    
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}

div.testColumn2{
    display: table-cell; height:100%; min-width: 25%;background-color: #ECFFE5; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}
div.testColumn3{
    display: table-cell; height:100%; min-width: 25%;background-color: #FFEBE5; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}

div.testColumn4{
    display: table-cell; height:100%; min-width: 25%;background-color: #FFFFCC; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;
}