CSS：当列数可变时如何使第n个表格列边框变粗？

Question

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

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

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

应 diffpas 的要求，这里是有问题的 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 的解决方案，它使用伪元素创建跨越表格高度的边框：

\n\n

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

\n\n

这假设列跨度位于 \xe2\x80\x93 部分中表格的第一行，thead如示例中的情况。

\n\n

小提琴

\n