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

Question

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

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

我想到的唯一方法是将每一列拆分为 3 列，每个列包含 "word"、od、the number itself 和 Kč，然后将中间的作为向右对齐。我还需要最小化三元组中前两个的宽度。

换句话说，我想将列拆分为 3，总宽度为 table 的 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 to make sure they are as wides as the digits (if the font supports it). Also set the 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

我觉得这是个伪元素的好地方

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

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

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

HTML table - minimize width of some columns while retaining width of others. Mixed with colspans

html

css

html-table