如何固定表单元宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

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

如何能够设置表的列宽,并像jqGrid那样遵从它?

提问于
用户回答回答于

可以尝试使用<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中,我们有了更好的解决方案:

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;}

结果

扫码关注云+社区