边界基于colspans

Question

我有一个相当基本的HTML问题，至少在我看来，难以解决。到目前为止，搜索网还没有产生任何结果。

如果我有下表（任意简单，仅举例）：

<table>
    <thead>
        <th colspan = "3">Monday</th>
        <th colspan = "2">Tuesday</th>
        <th colspan = "2">Wednesday</th>
        <th colspan = "1">Thursday</th>
        <th colspan = "2">Friday</th>
    </thead>
    <tbody>
        <tr>
            <td>Event 1 on Monday</td>
            <td>Event 2 on Monday</td>
            <td>Event 3 on Monday</td>
            <td>Event 1 on Tuesday</td>
            <td>Event 2 on Tuesday</td>
            <td>Event 1 on Wednesday</td>
            <td>Event 2 on Wednesday</td>
            <td>Event 1 on Thursday</td>
            <td>Event 1 on Friday</td>
            <td>Event 2 on Friday</td>
        </tr>
    </tbody>
</table>

结果应该是这样的（我手动完成，只是为了展示我想要的东西）：

虽然我显然更喜欢一行而不是两行但我不想手动完成。它应该采用标题的colspan来获得所有行的边框。

Answer 1

在css中使用nth-child，根据 css 中的colspan，没有其他方法可以提供边框，

table th,table tr td:nth-child(3),table tr td:nth-child(5),table tr td:nth-child(7),table tr td:nth-child(8){
    border-right:1px solid black;
}

FIDDLE

您可以使用jquery

来完成

$(document).ready(function(){
    var i=0;
    $('tr th:not(:last-child)').each(function(index){
        var th=$(this);
        th.css('border-right','1px solid black');
        i=i+parseInt(th.attr('colspan'));
        $('tr td:nth-child('+i+')').css('border-right','1px solid black');

  });
});

FIDDLE

Answer 2

我解决了类似的问题：

table {
  position: relative;
}

thead > tr:first-of-type th:not(:first-of-type)::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  border: 2px solid black;
  height: calc(100% - 3px);
}

伪元素跨越表格的整个高度。

Fiddle