Menu
I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is not necessary). I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.
Here's what I need:
I couldn't get (2) to be visible until I styled the table border-collapse: collapse;. Fine. But (3) apparently only works with border-spacing, and only on <td> elements (not <tbody> or <tr>), which is anyway disabled by the collapse. Meanwhile, for some unknowable reason, margin's are not recognized for <thead>, <tr>, or <th> elements, but having padding-top on the first row of the body's <td>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-padding gets highlighted as well, which nauseates me.
I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.
Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, provided you also either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
766
This would fix your problems without any hacks and ofcourse its completely possible. The updated code(only CSS changes) is shared below with explanations.
Problem 3 :
We can make use of the CSS selector :first-of-type(targeting only the first row) in succession with all the <td> under it and use attribute padding-top. Simple :-)
<tr> cannot have margin values by default. Again hacks are available(above mentioned answers) but I wouldn't go there as you don't want it.
And also since we have used padding, the hover effect would work perfectly on the entire row content. Hence getting the desired change without any markup changes.
Problem 2 :
We can remove the attribute border-collapse from table and instead apply the border on the <th>tags (let the border-spacing: 0 remain or the border would be discontinuous). Simple again :-)
Problem 1 and 4 are already covered. No markup changes as you wished. Here is the Fiddle
So the updated style code would look like
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
