css - 具有固定单元格宽度但自动表格宽度的表格

Question

如果我有一个带有 display: table; 的常规元素width: 100%; 元素增长超过给定宽度以容纳任意数量的列。我需要这种行为和相等的列宽。

我找到的所有解决方案要么是 JavaScript(通常是 jQuery)，要么是据说使用 table-layout: fixed 这需要表格的固定宽度(例如，100%)但是表格包含大量数据，甚至 1000px 也无法容纳那么多信息。

如何使用 CSS 重现此行为？

Answer 1

更新那么这样的事情？ http://jsfiddle.net/Jax5z/1/

---

根据您需要的浏览器支持以及显示的信息，如果表格单元格中的文本太长，您可以将其剪掉，这样仍然可以让表格拉伸(stretch)并填满页面。

http://jsfiddle.net/Jax5z/

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    cursor: crosshair;
    background: #eee;
}

td {
    border:1px solid black;
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: all .1s ease-out;
}