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

Question

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

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

我想到的唯一方法是将每列拆分为3列，每列包含每个＆＃34; word＆＃34; od，the number itself和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; }

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

此外，如果您最好先了解如何对齐数字，请随时分享。我知道这几乎是黑客，但我不知道更好。感谢。

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>

Answer 2

我认为这是伪元素的绝佳场所。

＆＃13;

＆＃13;

table {
  width: 80%;
  margin: auto;
}
thead {
  background: rebeccapurple;
  color: white
}
td {
  padding: .5em;
  text-align: right;
  position: relative;
  border: 1px solid grey;
}
tr td:first-child {
  text-align: left;
}
thead td:not(:first-child) {
  padding-right: 2.5em;
}
tbody td:not(:first-child):after {
  content: ' $';
}
tbody td:not(:first-child):before {
  content: 'From';
  position: absolute;
  left: 0;
  margin-left: 1em;
}

＆＃13;

<table>

  <thead>
    <tr>
      <td>Item</td>
      <td>Price</td>
      <td>Discounted Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Socks (pack of 50 pair)</td>
      <td>200</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Ties (each)</td>
      <td>25</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;