如何在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，但结果总是不寻常的。结果应如下所示：

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

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

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

Answer 1

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

Answer 2

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

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

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

关于文本对齐，你说了两件不同的事情：

  

使用CSS，我需要将所有单元格设置为50％宽度，文本为   左边的＃34;列＆＃34;在左列中右对齐和文本   左对齐。

然后

  

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

如果第一个符合您的要求并且您无法更改HTML，则可以使用td:first-child以不同的方式设置第一列的样式。

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

Answer 3

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

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