如何固定表单元宽度?

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

许多人仍然使用表格来布局控件、数据等--流行的jqGrid就是一个例子。然而,有一些魔术发生了,我似乎无法理解(它的桌子大声喊叫,可能有多少魔法?)

如何能够设置表的列宽,并像jqGrid那样遵从它?如果我试图复制这个,即使我设置<td style='width: 20px'>,当其中一个单元格的内容大于20 px时,该单元格就会扩展!

乐乐22乐乐22提问于
心愿回答于
已采纳

可以尝试使用<col>标记管理所有行的表样式,但需要设置table-layout:fixed上的样式<table>类和overflow单元格样式

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

这就是你的CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
郁闷的阿涛不优雅的人回答于

现在在HTML 5/CSS 3中,我们有了更好的解决方案。在我看来,这个纯粹的CSS解决方案是建议的:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

​只需像这样修改代码:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

结果

扫码关注云+社区