时间戳

首页 > 解决方案 > 在表格上设置宽度时如何在列之间平均分配额外的空间

css - 在表格上设置宽度时如何在列之间平均分配额外的空间

问题描述

我一直在寻找这个问题的答案很长时间，但从未看到答案的一瞥。

我正在用 HTML 制作一个表格并将其设置为特定的宽度（通常因此它占据所有空间）。它比它必须的大，所以在不同的列之间有额外的空间分割。问题是它与单元格的宽度成比例地拆分，而不是均匀地拆分，这看起来很奇怪。
例如，对于 120 像素的宽度，您将有一个 10 像素的大列，左侧有 20 像素的额外空间，而不是 30 像素的大列，左侧有 60 像素的额外空间。
我更喜欢 10 + 40 + 30 + 40 而不是 10 + 20 + 30 + 60，但我看不出有什么办法。在我看来，这可能是一个表格布局，但唯一的其他选项是“固定”，它为整个列提供固定大小而不是额外空间（给出 10 + 50 + 30 + 30）

我希望我能把我的问题说清楚，抱歉英语不好

编辑：我设法使片段工作，如您所见，每个单元格右侧的空白区域永远不会相同，这看起来很奇怪

table{
    width: 600px;
    border-collapse: collapse;
}
.fixed{
    table-layout: fixed;
}
td{
    border: 1px solid black;
}
<table>
    <tr>
        <td>Short</td>
        <td>A much much much much longer cell</td>
        <td>A</td>
    </tr>
</table>

<table class="fixed">
    <tr>
        <td>Short</td>
        <td>A much much much much longer cell</td>
        <td>A</td>
    </tr>
</table>

标签： csshtml-table

解决方案

我认为您也必须为<tr>and提供固定宽度<td>。

推荐阅读