如何在 CSS 中制作具有相同列宽的表格？

Posted 2023-03-05

【中文标题】如何在 CSS 中制作具有相同列宽的表格？

【英文标题】：How to make a table with equal column widths in CSS?

【发布时间】：2014-02-25 01:35:41

【问题描述】：

我有一个包含如下表格的文档：

<table>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
</table>

使用 CSS，我需要将所有单元格设置为 50% 宽度，左侧“列”中的文本右对齐，左列中的文本左对齐。我尝试了许多不同的选择，例如width: 50%; text-align: left，但结果总是不寻常。结果应如下所示：

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|

我无法直接调整表格的实际代码。我只能修改 CSS 样式。 Make columns of equal width in <table> 中的答案不合适，因为我不知道页面的宽度，宽度可能会有所不同。

如何在 CSS 中的两列表中设置等宽单元格，并且所有内容都对齐到中间？

【问题讨论】：

你对你的尝试有兴趣吗？设置固定宽度和单元格上的文本对齐应该可以工作

使用table-layout: fixed;

50% 宽度始终适用于单元格，我猜你的问题实际上是表格的宽度不是 100%。

哦，我明白了。我在外面和细胞之间放了填充物。此外，一些文字很长的文字导致某些表格无法达到 50%/50%。

【参考方案1】：

你可以在你的桌子上设置table-layout: fixed;。使用它，您可以覆盖浏览器的自动列大小调整。然后您的浏览器将第一列的列宽设置为全部。

【讨论】：

> 将第一列的列宽设置为全部——这不是真的！我不明白为什么这个答案有这么多赞成。表格和列的宽度由 table 和 col 元素的宽度或 第一行 单元格的宽度设置。后续行中的单元格不影响列宽。link

MDN 链接：developer.mozilla.org/en-US/docs/Web/CSS/table-layout

@HenryBrewer 为什么不直接编辑 TechGuy 的答案？ :)

【参考方案2】：

该表应具有width: 100% 属性。 See example here

table
    width: 100%;
    border-collapse:collapse;


td
    width: 50%;
    text-align: left;
    border: 1px solid black;

关于文本对齐你说了两件事：

使用 CSS，我需要将所有单元格设置为 50% 宽度，其中包含文本 左“列”右对齐，左列中的文本 左对齐。

然后

如何在 CSS 中的两列表中设置等宽单元格，并且所有内容都对齐到中间？

如果第一个是您想要的并且您无法更改 html，您可以使用 td:first-child 为您的第一列设置不同的样式。

如果第二个是您的最佳选择，只需将 text-align 值更改为 center。

【讨论】：

如果我有动态列数怎么办？

覆盖此属性并使用 javascript 设置它，并在渲染它们时使用平均值

【参考方案3】：

我在我的一个项目中遇到了同样的问题，但是当我结合上述两种解决方案时它得到了解决（感谢他们）。这是我的代码 sn-p ：

.Table
    width: 100%;
    table-layout: fixed;