CSS: how to make column column width n thick when the number of columns is variable?

enter image description here

I want to make the circular border thicker, but the number of columns can vary from 3 to 6, and I can only use simple CSS (without Javascript, SASS or running CSS via PHP). HTML is generated by PHP, but changing the PHP code to create a class or inline style is a last resort.

I tried using colgroupand col, but while col:first-child {border-right: 2px solid}working, col:last-child {border-left: 2px solid}put a thicker border on each column in the Percentage section.

Is there a way to make this border thicker according to the above restrictions?

At the request of dippas , here is the HTML code.

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

+4
2

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

, thead - .

Fiddle

+3

, CSS, . , — CSS.

+2

All Articles