HTML 表格 - 最小化某些列的宽度，同时保留其他列的宽度。与 colspans 混合

Question

我有一个非常简单的表格来显示价格。看起来像这样

现在我想做一些不那么简单的事情。我想让所有数字都右对齐，同时保持 od 和 Kč 对齐，从而使它看起来更好。换句话说，在这种情况下，我希望最后一个数字 60 向右移动以与上面较长的数字对齐。

我想到的唯一方法是将每一列分成 3 列，包含每个“单词”od、数字本身 和 Kč 并使中间的代码向右对齐。我还需要最小化三元组中前两个的宽度。

换句话说，我想将列分成 3 列，总宽度为表格的 25%，前两列应尽可能小，最后一列 Kč应该占用尽可能多的宽度。

这样我就可以将数字右对齐，同时产生整个文本左对齐的错觉。

这是我尝试做的过于简化的代码:

<table>
     <tr>
         <th>Ceník</th>
         <th colspan="3">Krátké vlasy</th>
         <th colspan="3">Podlouhlé vlasy</th>
         <th colspan="3">Dlouhé vlasy</th>
     </tr>

     <tr>
         <td>Střih</td>

         <td>od</td>
         <td>130</td>
         <td>Kč</td>

         <td>od</td>
         <td>280</td>
         <td>Kč</td>

         <td>od</td>
         <td>250</td>
         <td>Kč</td>
     </tr>

     <!-- OTHER ROWS HERE -->
</table>

和CSS样式

th, td { width: 25% }
tr td:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(5),
tr td:nth-child(6),
tr td:nth-child(8),
tr td:nth-child(9) { width: 1px; }

我试着这样做，看看结果如何。它根本不影响列的宽度。列仍然均匀分布。我不明白这段代码有什么问题。有什么想法吗？

此外，如果您对如何首先对齐数字有更好的想法，请随时分享。我知道这几乎是 hack，但我不知道更好。谢谢。

Answer 1

我的建议是填充空格以对齐数字。您可以使用 figure spaces确保它们与数字一样宽(如果字体支持的话)。同时设置 OpenType feature of tabular figures in CSS , 请确定(同样，只有在字体支持时才有效)。

table {
  font-feature-settings: "tnum";
}

<table>
  <tr>
    <th>Ceník</th>
    <th>Krátké vlasy</th>
  </tr>

  <tr>
    <td>Střih</td>

    <td>od &#8199;&#8199;&#8199;1 Kč</td>
  </tr>

  <tr>
    <td>Střih</td>

    <td>od &#8199;&#8199;60 Kč</td>
  </tr>

  <tr>
    <td>Střih</td>

    <td>od &#8199;160 Kč</td>
  </tr>

  <tr>
    <td>Střih</td>

    <td>od 1160 Kč</td>
  </tr>
</table>