Question

我希望有一个宽度为百分比的表，每列也有一个百分比宽度。我想用use css来做overflow：hidden;文本溢出：省略号;在某些列中，但它似乎对我不起作用。

这就是我所拥有的：

<table style='width:50%;'>
    <thead>
    <tr>
        <td style='width:15%;'>column 1</td>
        <td style='width:15%;'>column 2</td>
        <td style='width:70%;'>column 3</td>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>No hiding</td>
        </tr>
    </tbody>
</table>

随着页面变小，第三列变小，而不是前两列显示省略号和收缩，如我所料。

Here is a jsfiddle.

Answer 1

table {
    table-layout:fixed;
}

这可能就是你要找的东西。

http://jsfiddle.net/wGznj/2/

有关“表格宽度算法”部分的更多信息，@ http://reference.sitepoint.com/css/tableformatting

“使用固定的表格布局算法，列和表格的宽度不受表格单元格内容的控制。”相反，每列的宽度确定如下：


宽度未自动设置该列宽度的列对象。

第一行中宽度不是自动的单元格设置其所属列的宽度。如果单元格跨越多个列，则宽度将在列上分割。

任何剩余的列均等地划分剩余的水平空间，减去任何边框或单元格间距。“

如何使用溢出：隐藏;文本溢出：省略号;在百分比宽度的表格内

1 个答案: