html 标签的宽度属性因内容而无法正常工作

Question

我有一个 table 如下所示

<table width="50px" border="1">
    <tr>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
    </tr>
</table>

当我设置width="50px"时，table的宽度大于50px，除非我减小字体大小。

我想让 table 的宽度与我在属性 (width="50px") 中设置的宽度相同。

有什么方法可以自动减小字体大小以适应 table 的宽度？

Answer 1

将 style="table-layout: fixed;" 添加到 table 以限制比例。

<table width="50px" border="1" style="table-layout:fixed;">
    <tr>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
        <td>row1</td>
    </tr>
</table>

此外，您创建的是列而不是行...您将无法向其中添加任何可读文本！

行应由 <tr>'s

分隔

html 标签的宽度属性因内容而无法正常工作

Width attribute of html tag do not work well because of contents

html

css

width