html - 为什么这些 HTML 列标题未对齐？

Question

经过多次试验，我终于想出了相当简单的 HTML，它显示了一个
以我想要的方式表:6 列具有特定宽度，有两列
右对齐，在 a 下滚动
固定标题行。但是，标题与列不太对齐:

如何使标题与数据列完全对齐？
我的在线搜索发现这是一个常见问题，但没有真正的
原因的解释或已知的简单修复。
我的 HTML 如下。列宽很神奇
因为数据的数字
最终会显示出来。
使标题文本正常而不是粗体，
甚至空标题，
对对齐没有影响。
如果除了解决对齐问题，你还有一个更简单的方法
定义具有相同功能的表，请告诉我。
编辑: box-sizing: border-box;正如 ProllyGeek 推荐的那样看起来很有希望，因为它适用于上面的示例数据，
但是使用不同的单元格数据仍然会导致对齐稍微偏离
如此处所示(价格/掉落、掉落/描述和元素编号/已发布
即使使用 border-box，列边框也会关闭):

有几十个如果不是几百个帖子
想要在可滚动行上放置粘性标题，
但显然所有解决方案都避免动态列，
经常使用颜色来隐藏对齐问题，
或必须知道表的封闭 div
宽度以显示正确定位在动态旁边的滚动条
列宽。大多数示例忽略列宽
只需使用带有超大列的 100% 宽表。
似乎没有已知的自动解决方案
对于具有动态列宽(未声明表格宽度)的粘性标题，
在可滚动行上，具有精确的标题和列对齐，
只使用纯 CSS/HTML。
我将使用 thead { background-color: black; color: white; } 隐藏错位.

<style>

table {
    width: 688px; /* 688 = column widths 80 + 56 + 280 + 120 + 56 + 96 */
    table-layout: fixed;
    font: 12px Courier;
    border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 5px;
}

tbody {
  display: block;
  width: 703px; /* 703 = 688 table width + 15 extra for scrollbar */
  overflow-y: scroll;
  height: 65px;
}

thead tr { display: block; } 

tr:nth-child(even) { background-color: #eee; }

th:nth-child(1), td:nth-child(1) {text-align: right; width:  80px; }
th:nth-child(2), td:nth-child(2) {text-align: left;  width:  56px; }
th:nth-child(3), td:nth-child(3) {text-align: left;  width: 280px; }
th:nth-child(4), td:nth-child(4) {text-align: left;  width: 120px; }
th:nth-child(5), td:nth-child(5) {text-align: right; width:  56px; }
th:nth-child(6), td:nth-child(6) {text-align: left;  width:  96px; }

</style>

<table>
  <thead>
    <tr>
      <th>Price</th>
      <th>Drops</th>
      <th>Description</th>
      <th>Category</th>
      <th>Item #</th>
      <th>Posted</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
    <tr>
      <td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
    <tr>
      <td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
    <tr>
      <td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
  </tbody>
</table>

Answer 1

我建议使用最小、最大宽度而不是宽度。
此外，您添加了所有列宽，但每列都有 5px 的内边距，即在左侧增加 5px，在右侧增加 5px。所以，一定要把它们加起来。
这是修复:

        table {
            /* width: 688px; 688 = column widths 80 + 56 + 280 + 120 + 56 + 96 + 60(padding)*/
            min-width: 748px;
            max-width: 763px;
            table-layout: fixed;
            font: 12px Courier;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid black;
            padding: 5px;
        }

        tbody {
            display: block;
            /* max-width: 763px; */
            /* 763 = 688 table width + 60(padding) + 15 extra for scrollbar */
            overflow-y: scroll;
            height: 65px;
        }

        thead tr {
            display: block;
        }

        tr:nth-child(even) {
            background-color: #eee;
        }

        /* th:nth-child(1), td:nth-child(1) {text-align: right; width:  80px; }
        th:nth-child(2), td:nth-child(2) {text-align: left;  width:  56px; }
        th:nth-child(3), td:nth-child(3) {text-align: left;  width: 280px; }
        th:nth-child(4), td:nth-child(4) {text-align: left;  width: 120px; }
        th:nth-child(5), td:nth-child(5) {text-align: right; width:  56px; }
        th:nth-child(6), td:nth-child(6) {text-align: left;  width:  96px; } */

        th:nth-child(1),
        td:nth-child(1) {
            text-align: right;
            min-width: 80px;
            max-width: 80px;
        }

        th:nth-child(2),
        td:nth-child(2) {
            text-align: left;
            min-width: 56px;
            max-width: 56px;
        }

        th:nth-child(3),
        td:nth-child(3) {
            text-align: left;
            min-width: 280px;
            max-width: 280px;
        }

        th:nth-child(4),
        td:nth-child(4) {
            text-align: left;
            min-width: 120px;
            max-width: 120px;
        }

        th:nth-child(5),
        td:nth-child(5) {
            text-align: right;
            min-width: 56px;
            max-width: 56px;
        }

        th:nth-child(6),
        td:nth-child(6) {
            text-align: left;
            min-width: 96px;
            max-width: 96px;
        }

        .lastColumn {
            min-width: 114px !important;
        }

    <table>
        <thead>
            <tr>
                <th>Price</th>
                <th>Drops</th>
                <th>Description</th>
                <th>Category</th>
                <th>Item #</th>
                <th class="lastColumn">Posted</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>$5.00
                <td>Oct 10
                <td>Valuable item
                <td>Miscellaneous
                <td>1234
                <td>Sep 10 2020
            </tr>
            <tr>
                <td>$5.00
                <td>Oct 10
                <td>Valuable item
                <td>Miscellaneous
                <td>1234
                <td>Sep 10 2020
            </tr>
            <tr>
                <td>$5.00
                <td>Oct 10
                <td>Valuable item
                <td>Miscellaneous
                <td>1234
                <td>Sep 10 2020
            </tr>
            <tr>
                <td>$5.00
                <td>Oct 10
                <td>Valuable item
                <td>Miscellaneous
                <td>1234
                <td>Sep 10 2020
            </tr>
        </tbody>
    </table>

您只需要最后一列来获取剩余的宽度。因此，指定到该列。