html - CSS:当列数可变时，如何使第 n 个表的列边框变粗？

Question

我想让带圆圈的边框变粗，但列数可以从 3 到 6 不等，而且我只能使用纯 CSS(没有 Javascript、SASS 或先通过 PHP 运行 CSS)。 HTML 由 PHP 生成，但更改 PHP 代码以生成类或内联样式是最后的手段。

我尝试使用 colgroup 和 col，但是尽管 col:first-child {border-right: 2px solid} 有效，col:last-child {border-left: 2px solid} 在“百分比”下的每一列上加粗边框。

有没有办法在上述限制下使边框变粗？

应 dippas 的要求，这里是有问题的 HTML 代码。

<table class="type1">
  <colgroup>
    <!-- note that "4" could range from 3 to 6 -->
    <col span="1">
    <col span="4">
    <col span="4">
  </colgroup>
  <thead>
    <tr>
      <th scope="row" rowspan="2">S = small M = medium L = large</th>
      <th scope="col" colspan="4">Responses</th>
      <th scope="col" colspan="4">Percentage</th>
    </tr>
    <tr>
      <th scope="col">S</th>
      <th scope="col">M</th>
      <th scope="col">L</th>
      <th scope="col">Tot</th>
      <th scope="col">S</th>
      <th scope="col">M</th>
      <th scope="col">L</th>
      <th scope="col">Tot</th>
    </tr>
  </thead>
  <tbody>
    <!-- following tr structure repeats for each question -->
    <!-- other questions have been removed for brevity -->
    <tr>
      <th scope="row">1. What size Coke do you prefer?</th>
      <td>24</td>
      <td><strong>28</strong></td>
      <td>0</td>
      <td>52</td>
      <td>46</td>
      <td><strong>54</strong></td>
      <td>0</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

再次注意，列数是可变的。在这种情况下，问题的可能答案是“小、中或大”，但也可能是“从 1 到 5 等，等等。”

Answer 1

这是一个仅使用 CSS 的解决方案，它使用伪元素来创建横跨表格高度的边框:

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

这假设 colspans 位于 thead 部分中表格的第一行 - 正如您的示例中的情况。

Fiddle