如何在CSS中制作一个列宽相等的表格？

lqfhib0f 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(262)

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

<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 中的答案不合适，因为我不知道页面的宽度，而且那个宽度可能会有所不同。

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

css

来源：https://stackoverflow.com/questions/21495634/how-to-make-a-table-with-equal-column-widths-in-css

3条答案

按热度按时间

1tuwyuhd1#

您可以在表格上设置table-layout: fixed;。使用此选项可以覆盖浏览器的自动列大小调整。然后，列宽将根据您分配给第一行单元格的宽度进行设置。

赞(0）回复(0）举报 2023-02-01

u7up0aaq2#

我在我的一个项目中遇到过同样的问题，但是当我把上面的两个解决方案结合起来时，它得到了修复（感谢他们）。

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

赞(0）回复(0）举报 2023-02-01

wfsdck303#

该表应具有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。

赞(0）回复(0）举报 2023-02-01

我来回答

如何在CSS中制作一个列宽相等的表格？

3条答案

相关问题

热门标签

最新问答