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

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

• 我不能直接调整表的实际代码。 我只能修改CSS样式。
• 在<table>中使Make列具有相等宽度的答案是不合适的，因为我不知道页面的宽度，并且该宽度可能会有所不同。

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

Answer 1

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

Answer 2

该表应具有width: 100%属性。 见这里的例子

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 。

Answer 3

我在我的一个项目中遇到了同样的问题，但是当我将上述两种解决方案结合起来时（我们感谢它们），它得到了修复。 这是我的代码片段：

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