- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I have been going to ridiculous lengths to avoid using a table. After trying many techniques, I think I finally found one that works:
div.container { display: table-row; }
div.left { display: table-cell; }
div.right { display: table-cell; }
This indicates that there is wide support for it:
http://caniuse.com/#feat=css-table
But, I don’t see anywhere if you must have display: table containing display: table-row in the spec and don’t know if all of those browsers will support display the way that I am using it. Do you know?
If IE8 is your minimum supported browser then you’re good to go with display: table;
. Any missing table element is automatically added internally as required. Otherwise the thing wouldn’t work at all. Firefox used to require all three levels of elements, but that was many years ago.
You may also want to check out table-layout: fixed;
property.
I should have said why I was asking the question. If I need an extra wrapper element simply to have display: table assigned to it, it seems almost as artificial as using a table. For example:
<div class="page">
<div class="body">...</div>
<div class="sidebar">...</div>
</div>
seems clear to me, semantically. If I need another element so that it can have display: table:
<div class="extra">
<div class="page">
<div class="body">...</div>
<div class="sidebar">...</div>
</div>
</div>
“extra” serves no purpose, semantically. I suppose it might be better for a blind person if it was not a table though.