制作表格的最佳方法是什么（不一定使用表格标签），其中每行具有固定高度并填充整个可用水平空间，其中一列具有动态宽度，尽可能多地显示文本而不会断行？像Gmail和Google Reader一样。
我非常喜欢这种呈现信息的方式。可扩展的固定高度行是扫描数据列表的好方法，恕我直言。
制作表格的最佳方法是什么（不一定使用表格标签），其中每行具有固定高度并填充整个可用水平空间，其中一列具有动态宽度，尽可能多地显示文本而不会断行？像Gmail和Google Reader一样。
我非常喜欢这种呈现信息的方式。可扩展的固定高度行是扫描数据列表的好方法，恕我直言。
看到： http://jsfiddle.net/gtRnn/
<p>What is the best way *snip*</p>
p {
border: 1px dashed #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
每个属性都在做有用的事情：
看到： http://jsfiddle.net/gtRnn/
<p>What is the best way *snip*</p>
p {
border: 1px dashed #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
每个属性都在做有用的事情：
其他答案在表格中不起作用，如下所示： http://jsfiddle.net/gtRnn/8/ - 链接还包含正确的方法。
解决方案是设置 表格的布局 桌子上的风格 固定 并为每列提供百分比或绝对宽度。 table-layout：fixed; 告诉浏览器不要根据内容计算表的宽度，而是根据给每个单元格的显式宽度计算表的宽度。
工作实例： http://jsfiddle.net/gtRnn/8/
码：
<style type="text/css">
.my-table {
/* This is important for ellipsis to work in tables.
Don't forget to explicitly set the widths on all columns. */
table-layout: fixed;
width: 100%; /* The table must be given a width. */
}
.overflow-ellipsis {
overflow: hidden; /* Ellipsis won't work without this. */
text-overflow: ellipsis; /* The most important part */
}
</style>
<table border="1" class="my-table">
<tr>
<td width="10%">1.</td>
<td width="90%" class="overflow-ellipsis">
In this TD, wrapping still occurs if there is white space.
ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
</td>
</tr>
<tr>
<td width="10%">2.</td>
<td width="90%" class="overflow-ellipsis" style="white-space:nowrap;">
In this TD, wrapping will not occur, even if there is white space.
</td>
</tr>
</table>
混合百分比宽度和绝对宽度不能正常工作（至少在谷歌浏览器中）。
关键是 overflow: hidden; 和 white-space: nowrap;
<div style="width: 200px; overflow: hidden; white-space: nowrap;">some long text.............asdfasdf........</div>