Making divs behave like a table, without using display: table

Question

The headers should aline nicely with the content

Everything is allowed, just not using table elements

<div style="">
    <div style="">
        <span  class="" >Firstname</span>
        <span  class="" >Lastname</span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Tom </span>
        <span class=""  style=""> Jones </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> Micheal </span>
        <span class=""  style=""> Jackson </span>
    </div>
    <div style="" class="">
        <span class=""  style=""> SomedudewithsuperlongFirstname </span>
        <span class=""  style=""> SomedudewithsuperlongLastname </span>
    </div>
</div>

The css:

   span{
        display: inline-block;
        min-width: 100px;
    }
    div div {
        min-width: 100px;
    }

Just out of curiosity, this looks like tabular data so why not use tables? — Dryden Long, Apr 03 '14 at 19:44
I'd go ahead and just use tables, its tabular data anyways...But here you are -> http://jsfiddle.net/J83sG/ — Jack, Apr 03 '14 at 19:47
@JackWilliams you example doesn't take into automatic vertical height adjustments an html table will do. — Erik Philips, Apr 03 '14 at 19:49
That's true, but I think that's beyond the scope of what OP is looking for though, nevertheless, that's valid point. — Jack, Apr 03 '14 at 19:50
I have just created a [new fiddle](http://jsfiddle.net/8aWL8/), this should behave even more like a table. If you want to support IE7 or under, you will need to use a [inline-block hack](http://css-tricks.com/snippets/css/cross-browser-inline-block/). — Jack, Apr 03 '14 at 19:59
isn't there a newer, neater way? Tabular data... yes you are right, but I don't like tables, they behave very oddly and inconsistently with some things. Or am I wrong? IE7 is dead — Toskan, Apr 03 '14 at 20:26
@Toskan Why don't you like tables? If you explain, maybe we can clear up some misunderstandings. For this particular example, tables are the perfect, 100% fitting solution. — Mr Lister, Apr 03 '14 at 20:28
there seems to be many css properties that behave oddly or are not cross browser compatible. I had problems using rounded corners on tables a while back. Like everything behaves similar, but in table cells it is different. — Toskan, Apr 03 '14 at 20:33
@MrLister http://stackoverflow.com/questions/4851760/firefox-4-no-longer-supports-scrollable-tbody-workarounds is a good example as well. Dafuq is this not in the html spec. In short, tables suck. End of story — Toskan, Apr 03 '14 at 23:50
Pfff, just because they don't support fancy styling, they suck? Then you can also say SVG sucks because it doesn't support all styles. And underlining sucks because it is treated differently in different browsers. And HRs suck because they have different default styles in different browsers. And border-style:outset sucks because it causes different colors in different browsers. In short, you can just say that browsers suck and be done with it. — Mr Lister, Apr 04 '14 at 06:02
@MrLister a scrollable tbody aint that fancy. And yeah browsers suck, but they suck especially hard with certain elements. But for the actual implementation, I went back to using tables together with jqueries datatables plugin. — Toskan, Apr 04 '14 at 21:18

score 2 · Accepted Answer · edited May 23 '17 at 11:49

Prelude

Whilst you're right to be weary of using tables, if you use them to represent tabular data, that's fine!

But, as you rightly said, there are quite a few caveats of them; especially how certain browsers interpret them differently, as illustrated in your Firefox 4 example in the comments section.

Whilst i think some of the aforementioned issues could be overcome with CSS table styles, hacks and workarounds, i don't think it's worth the hassle or overhead.

If you're not satisfied with HTML tables, or CSS table styles, we could emulate some `<table>` properties.

HTML

<div id="container">
    <div class="children">
        <p><span>Firstname</span></p>
        <p><span>Tom</span></p>     
        <p><span>SomedudewithsuperlongFirstname</span></p>     
    </div>
    <div class="children">
        <p><span>Lastname</span></p>
        <p><span>Jones</span></p>
        <p><span>SomedudewithsuperlongLastname</span></p>   
    </div>  
</div>

CSS

#container{
    display: block;
    border: 1px dashed #ccc;    
    width: 500px;
    margin: 0 auto;
}
.children{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.children > p > span{
    vertical-align: middle;
}

DEMO

If you're going to abandon the semantic structure provided by tables (with headers) at least provide [`aria-labeledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) attributes so that screenreader users will have a fighting chance to make sense of that. — steveax, Apr 04 '14 at 03:02

score -1 · Answer 2 · answered Apr 03 '14 at 19:48

If you are looking for identical widths on your DIVs, min-width is probably not the way to go. This only ensures the elements are a minimum width. If the content in one "cell" exceeds this, they won't line up.

Maybe try width instead of min-width? Or a larger min-width?

Making divs behave like a table, without using display: table

2 Answers2

Prelude

If you're not satisfied with HTML tables, or CSS table styles, we could emulate some <table> properties.

If you're not satisfied with HTML tables, or CSS table styles, we could emulate some `<table>` properties.