Question

我正在尝试使用一个表格来定义固定宽度列。每个列宽都是预定义的，并通过以下方式应用于表头中的'th'元素： ng-style ='{“width”：get_width [i] +“px”}'，其中get_width函数返回一个数字。

只要文本不超过指定的列宽，这就可以正常工作。如果是，则宽度会更改以适应整个文本。

问题，如何使用CSS强制列宽到我的规格？如果更长，文本可能会被截断。

提前谢谢。

Answer 1

您可以使用css FIDDLE

截断文字

CSS

.div1 {
    white-space:nowrap;
    width:12em;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid #000000;
}

HTML

<p>This div uses "text-overflow:ellipsis":</p>
<table>
    <tr>
        <td><div class="div1">This is some long text that will not fit in the box.</div></td>
    </tr>
</table>

Answer 2

如果可以，可以通过设置<table>元素的样式将表格的宽度设置为整体。显然，CSS的许多实现都会扩展列以适应文本，直到它们与表的最大宽度相冲突。

Source

Answer 3

您需要设置表格布局固定并为单元格设置隐藏溢出，您必须使用

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

.fixed-table{ table-layout:fixed; word-break: break-all;}
.fixed-tabletd { overflow: hidden; }

修复了html表中列的宽度

3 个答案: