Question

我在div中的表格绝对位于我的页面上。像（左：50px;右：50px;等）。

第一列值可能非常冗长，但其余的几乎都是静态宽度。我想将第二，第三等列设置为特定宽度，并使第一列自动调整大小。但是，我希望它能够调整大小，即使它会截断文本（即我总是希望其他列显示）。目前这并没有发生。它将右列推出div。

这是一个小提琴：http://jsfiddle.net/pdtLoy6d/2/您可以通过调整右小提琴窗格来重现。

<table>
    <col width="auto" />
    <col width="80px" />
    <col width="150px" />
    <tr>
        <td>This is a thing it could be a really really really long string and I want it to truncate</td>
        <td>Thing2</td>
        <td>That thing is always short</td>
    </tr>
    <tr>
        <td>Not sure if it matters, but these rows are all dynamically generated</td>
        <td>Thing2</td>
        <td>test</td>
    </tr>
</table>

table {
    width: 100%;
    border: 1px solid gray;
    border-collapse: collapse;
}
td { 
    border: 1px solid gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Answer 1

这是你正在寻找的吗？

http://jsfiddle.net/pdtLoy6d/3/

table {
    table-layout: fixed; /*added*/
}

100％宽度表，一列灵活大小并截断窗口/父级调整大小的文本？

1 个答案: