0

I have the following table:

table { border-collapse: collapse; } tr:not(.header) td:not(.empty) { background: #eee; width: 100px; padding: 5px; } td.empty { width: 25px; background: white; border-right: 1px solid red; } tbody tr.header + tr td:not(.empty){ border-top: 1px solid red; }
<table> <tbody> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> </tbody> </table>

The markup is generated by the Kendo framework. I am using Kendo Grids with the groupable feature enabled (http://demos.telerik.com/kendo-ui/grid/api). I cannot edit the markup provided.

And I am trying to put the same red border on the bottom of the gray areas, but I'm not sure I'm going to be able to in pure CSS. I was messing around with the adjacent/general sibling selectors, but no luck.

Here's what the table should look like:

enter image description here

Is there any way (in pure CSS) to give a red border to the bottom of the gray areas?

Improve this question
8
  • 2
    I'm pretty sure you'd need JavaScript to do this. Commented Feb 20, 2015 at 0:41
  • @dcc - the empty class td is never the last child so that wouldn't work. Commented Feb 20, 2015 at 0:46
  • 1
    I don't agree with down voting and not explaining, but it is in fact not good markup. You're trying to group together elements that don't logically group. Random headers thrown in here and there, not using nesting or grouping, and not using th or similar. It's no wonder it's hard to find a solution. I suggest taking all your header/cell group pairs and wrapping them in tbodys. It's valid markup to do so and with that you could using tr + tr syntax or :last-child. Commented Feb 20, 2015 at 1:00
  • 1
    That doesn't necessarily mean its bad markup. That is quite literally the format of the markup provided from Telerik's Kendo. Its what I have to work with. Commented Feb 20, 2015 at 1:02
  • 1
    It may be a third party vendor, but it's still bad markup. The fact that it's a struggle to do this otherwise simple task is evidence of it being less than ideal. I am, however, very curious why they did it this way, now. Maybe it has to do with pagination or some other factor that's not quite obvious? Commented Feb 20, 2015 at 1:05

2 Answers 2

Reset to default
1 

 table { border-collapse: collapse; } tr:not(.header) td:not(.empty) { background: #eee; width: 100px; padding: 5px; } td.empty { width: 25px; background: white; border-right: 1px solid red; } tbody tr.header + tr td:not(.empty){ border-top: 1px solid red; } table { position:relative; } table:after { content:'\A';position:absolute;bottom:0;width:89%;left:27px;border-bottom:1px solid red; } tr.header:before { content:'\A';height:1px;left:27px;position:absolute;width:89%;border-top:1px solid red; } tr.header:first-of-type:before { border-top:none; }
<table> <tbody> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> </tbody> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Rather than setting width: 89%, I'd suggest setting right: 0 instead. In doing so, it should work for varying widths (assuming that there will always be a 27px of empty space on the side.)
Tried that, but the table is wider than the grey area.
If you remove width: 89% and relatively position the parent element (.empty { position: relative; }) it will work along side right: 0.
This is very close. Though it does move the header text to the right a good amount.
0

You can obtain what you need without using JavaScript and leaving the HTML structure in your document as is by adding a new CSS rule, making use of the :has() relational pseudo-class which is being supported by all major browsers since the end of 2023 at least (see).

table {border-spacing:0; width:100%;} td {padding:.675em;} tr.header ~ tr:has( + tr.header) > td:not(.empty), tr.header ~ tr:last-child > td:not(.empty) { border-bottom: 1px solid green; }
<table> <tbody> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr class="header"> <td colspan="3">HEADER</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> <tr> <td class="empty">&nbsp;</td> <td>cell</td> <td>cell</td> </tr> </tbody> </table>

So here the needed CSS rule is:

tr.header ~ tr:has( + tr.header) > td:not(.empty), tr.header ~ tr:last-child > td:not(.empty) { ... }

In this case, the first row of the CSS rule matches each "<td>" whose class is not "empty" children of any "<tr>" of class "header" subsequent "<tr>" siblings before the next "<tr>" of class "header". The second row matches "<td>" whose class is not "empty" that are children of a last-child "<tr>" that is subsequent sibling of some "<tr>" of class "header" (the last one, of course).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.