html - 如何在 CSS 中制作列宽相等的表格？

Question

我有一个包含这样的表格的文档:

<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% 宽度，左侧“列”中的文本右对齐，左侧列中的文本左对齐。我尝试了很多不同的选择，例如宽度:50%； text-align: left，但结果总是不正常。结果应如下所示:

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

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

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

Answer 1

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