100% 宽度 table，一列灵活大小并在 window/parent 调整大小时截断文本？

Question

我在 div 中有一个 table 绝对定位在我的页面上。类似（左：50px；右：50px；等）。

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

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

<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% 宽度 table，一列灵活大小并在 window/parent 调整大小时截断文本？

100% width table, one column flexible size and truncate text on window/parent resize?

html

css

html-table