html - 如何独立修复表格宽度内容？

Question

无论内容是什么，我都在尝试修复宽度。但是，表格的宽度会根据其内容而变化。我该如何解决？

这是我的代码：

<style>
           table{width:25px; background:#66f;}
    </style>
    <table>
           <tr>
                   <td>sn</td>
                   <td style="width:20px;">Name</td>
           </tr>
           <tr>
                   <td>1</td>
                   <td>Wolfeschlegelsteinhausenbergerdorff</td>
           </tr>
    </table>

Answer 1

试试这个

<table>
    <tbody><tr>
        <td>sn</td>
        <td style="width:20px;">Name</td>
    </tr>
    <tr>
        <td>1</td>
        <td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
    </tr>
</tbody>
</table>

Answer 2

您需要相应地使用table-layout: fixed;和提供width给您的table和td元素。

你也应该使用word-wrap: break-word;这样，如果你遇到一个未中断的字符串，你就不会遇到麻烦

演示

Answer 3

您没有提到带有点扩展名的样式类表，也不会使用类属性调用它。

这是代码：

<style>
        .table{
          width:25px; background:#66f;
        }
</style>
    <table class="table">
        <tr>
           <td>sn</td>
           <td style="width:20px;">Name</td>
        </tr>
        <tr>
           <td>1</td>
           <td>Wolfeschlegelsteinhausenbergerdorff</td>
        </tr>
   </table>