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!).
-
Specs? We don't need no stinkin' specs!
-- said every browser maker except old Opera
-
> Specs? We don't need no stinkin' specs!
-- said every browser maker except old Opera
-
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.
-
-
I did a ninja edit.
-
-
http://jsfiddle.net/mgb8znxt/1/
http://jsfiddle.net/mgb8znxt/18/
table { border-collapse: collapse } td, th { border: 1px solid } table table { border: hidden }
-
-- 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%
-
s/ninja/hanzo/ig
-
-
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; }
-
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.
-
.outer > tr > td { padding: 0; margin: 0; }
That won't work because HTML parsers implicitly add tbody elements.
-
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?
-
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.
-
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.
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.
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.
