如何在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样式.
• 在<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;
}