2

我想要一个具有百分比宽度的表格，并且每列也将具有百分比宽度。我想使用使用 css 来做溢出：隐藏；文本溢出：省略号；在某些列中，但它似乎对我不起作用。

这是我所拥有的：

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

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

这是一个jsfiddle。

4

1 回答 1

3 
table {
    table-layout:fixed;
}

这可能是您正在寻找的。

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

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

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

  • 宽度不是自动设置该列宽度的列对象。
  • 第一行中的单元格，其宽度不是自动的，设置它所属列的宽度。如果单元格跨越多列，则宽度将按列划分。
  • 任何剩余的列均分剩余的水平空间，减去任何边框或单元格间距。”
于 2013-05-06T18:56:11.290 回答