如何添加固定宽度的td表

Question

我在td中设置了一个固定的宽度，但是当表格溢出时它不起作用。 我试过的是下面的代码。

td {
       width: 192px;
   }

Answer 1

它可以通过以下2个步骤解决。

1 - 在桌子上设置宽度：100%

2 - 当您的数据溢出时，在表的 td 上使用 class 像这样。

.dataRow
{           
word-wrap: break-word;
word-break: break-all;           
}

3 - 在上述 2 之后，如果需要，您还可以根据需要设置宽度。

Answer 2

您可以使用td { width:20px}在 css 中进行更改，也可以将其更改为内联<td style="width:20px">.

Answer 3

这可以使用display属性来实现。

检查下面的片段。

 .wrapper { width: 180px; border: 1px solid #000; }.table-scroll { width: 100%; table-layout: fixed; }.table-scroll tbody { display: block; overflow: scroll; }.table-data { border: 1px solid #0F0; }.table-detail { border: 1px solid #F00; } td.first { width: 200px; display: inline-block; }

 <div class="wrapper"> <table class="table-scroll table-data"> <tbody> <tr> <td class="first">HEAD1</td> <td>HEAD2</td> <td>HEAD3</td> <td>HEAD4</td> </tr> </tbody> </table> </div>