选择前一个兄弟元素的CSS选择器

Question

我有下表：

＆＃13;

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

标记由Kendo框架生成。我正在使用Kendo Grids并启用了分组功能（http://demos.telerik.com/kendo-ui/grid/api）。我无法编辑提供的标记。

我试图在灰色区域的底部放置相同的红色边框，但我不确定我是否能够使用纯CSS。我正在弄乱相邻的/一般的兄弟选择器，但没有运气。

这是表格的样子：

有没有办法（在纯CSS中）给灰色区域的底部一个红色边框？

Answer 1

＆＃13;

＆＃13;

    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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;