html – 如何使CSS中具有相等列宽的表?

前端之家收集整理的这篇文章主要介绍了html – 如何使CSS中具有相等列宽的表?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含这样的表的文档:
<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中的两列表中设置相等宽度的单元格,其中所有对齐到中间?

解决方法

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

猜你在找的HTML相关文章