CSS & Tables: an epic love story



  • Okay, so I'm super lazy and only going to dish the WTF instead of the entire thing complete with code and pics.

    Getting a table (and nested tables) to display with a border that's actually 1px, instead of sometimes 1px (even when you omit the edge case of the nested table border, which you'd expect to double), and not consistently, requires this monstrosity:

    /* Border-wrangling. */
    table { border-width: 0 0 1px 1px; border-spacing: 0; }
    td, th { border-width: 1px 1px 0 0; }
    .nested, .nestedInline { border-width: 0; }
    .nested tr td:last-child { border-right-width: 0; }
    .nested tr:first-child td, .nestedInline tr:first-child td { border-top-width: 0; }
    .nested tr:first-child td:last-child { border-width: 0; }
    

    And why? Because border-collapse apparently means "sometimes collapse, sometimes make it thicker than a sumo wrestler's thighs".

    And I like CSS. ::sigh::

    The nested/nestedInline classes are anonymized; one is a table that occupies all of its parent cell, while the other appears in a row of tables that don't fill the cell.



  • This post is deleted!


  • Ok, I see what you mean.

    http://jsfiddle.net/mgb8znxt/1/

    Admittedly this feels like a pretty niche usage.



  • Well, getting a single table to display a uniform border is also a WTF, since it requires drawing the borders of one corner for each cell, then for the opposite corner for the table.

    Border-collapse: collapse is supposed to mean that two abutting 1px borders combine to make a 1px border, but in practice the table renders with borders with more or less pseudorandom widths. Of course, when I do this in jsfiddle, it renders correctly: http://jsfiddle.net/mgb8znxt/7/

    ::sigh::



  • Are you using a normalise.css or a css.reset?



  • No, but apparently they don't help. This is a rendering issue with the browsers, I think. I don't know exactly why it happens, but either I need to read the spec or they don't obey the spec.

    In any case, in a fit of pique, I tried a borderless "flat" style, and the company I'm doing this for loved it. Sadly, that means I've now made something that looks like Windows 8. However, the borders wrangle correctly.

    I'll have to post again about these inline tables and scroll bars, as that was yet another major issue I had with tables and CSS combined. I actually tried a non-table layout (for what is essentially tabular data, even!).


  • sockdevs

    Specs? We don't need no stinkin' specs!

    -- said every browser maker except old Opera



  • @Arantor said:

    > Specs? We don't need no stinkin' specs!

    -- said every browser maker except old Opera


  • sockdevs

    Wrong kind of specs, pendant :P



  • Going to check this behaviour out at home, because I know this has worked in older browsers.

    Also you shouldn't be writing your own CSS these days for this sort of stuff.



  • @lucas said:

    Also you shouldn't be writing your own CSS these days.

    Say whaaaaat?



  • I did a ninja edit.



  • @lucas said:

    I did a ninja edit.

    Damn it. Now I look like a liar. :(



  • @cartman82 said:

    http://jsfiddle.net/mgb8znxt/1/

    http://jsfiddle.net/mgb8znxt/18/

    table { border-collapse: collapse }
    td, th { border: 1px solid }
    table table { border: hidden }
    

  • :belt_onion:

    @Arantor said:

    -- said every browser maker except old Opera

    And then shit broke in it since no one followed the specs since there was no point...


    Filed under: I was the 2%


  • sockdevs

    s/ninja/hanzo/ig



  • @lucas said:

    Also you shouldn't be writing your own CSS these days for this sort of stuff.

    Oh?



  • @fatbull said:

    table { border-collapse: collapse }
    td, th { border: 1px solid }
    table table { border: hidden }

    And cue the client complaining about the gap. Also, this works fine if it weren't for border-collapse wanting to eat itself.

    This is closer to a solution, even if it does have a negative margin ::gives it the hairy eyeball:: :

    table { border-collapse: collapse; }
    td, th { border: 1px solid black; }
    .outer > tr > td { padding: 0; margin: 0; }
    .nested { border: hidden; margin: -1px; padding: 0; }
    .nested td { padding: .5em; }

    http://jsfiddle.net/mgb8znxt/36/



  • Unless I really have to, I use a well know CSS framework and this stuff becomes something you need not remember. Someone else has done the hard work for you.



  • @VaelynPhi said:

    .outer > tr > td { padding: 0; margin: 0; }

    That won't work because HTML parsers implicitly add tbody elements.

    http://jsfiddle.net/mgb8znxt/39/


  • :belt_onion:

    @lucas said:

    Unless I really have to, I use a well know CSS framework and this stuff becomes something you need not remember. Someone else has done the hard work for you.

    Up until it doesn't have a class for your specific needs. What then? Run to SO and start pasting random bits and pieces from there until it works?



  • @VaelynPhi said:

    In any case, in a fit of pique, I tried a borderless "flat" style, and the company I'm doing this for loved it. Sadly, that means I've now made something that looks like Windows 8. However, the borders wrangle correctly.

    It was obvious to me from the start that anything as hideous as Metro could only ever have been the result of a designer just throwing up their hands at the box model and giving up.



  • @fatbull said:

    That won't work because HTML parsers implicitly add tbody elements.

    Ah, yes; something that I didn't spot in jsfiddle. It's nice for fiddling with js; it makes for clunky css editing, though.

    @lucas said:

    Unless I really have to, I use a well know CSS framework and this stuff becomes something you need not remember. Someone else has done the hard work for you.

    I'm open to suggestions, but my experience is usually the opposite. Feel free to name names and next project I'll try it out. I will point out that I am typically the one my friends and colleagues come to when they just can't CSS; it is not troublesome for me. However, this border-collapse thing is a bit ridiculous. Once I'm through with my week of hell, I'm going to produce some examples with screenshots so I stop sounding like some crazy ranting about the reptilians in the hollow earth.

    @flabdablet said:

    It was obvious to me from the start that anything as hideous as Metro could only ever have been the result of a designer just throwing up their hands at the box model and giving up.

    This is my favourite explanation for Metro, BTW. When the first preview came out I joked with some web designer friends that MS finally gave up on CSS and was just using tables for layout like they always wanted.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.