Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS display: table-cell for proportional width columns

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #157729
    queshaw
    Participant

    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?

    #157740
    Merri
    Participant

    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.

    #157753
    queshaw
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.