html - 水平展开表格

Question

我想创建一个包含固定大小列的表格(第一个列除外，它会展开以适应最宽的单元格)。问题是当水平空间不足时，滚动条不会出现并且列会缩小。我还希望单元格在内容太长时隐藏内容。我试着搞乱溢出，但没有帮助。这是代码:

<table>
<tr>
    <td>1</td>
    <td style="width: 9999px">2</td>
    <td style="width: 9999px">3</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>

编辑:有很多误解所以我会在这里写下所有内容:第一列是它需要的宽度(这意味着它刚好适合其中最宽的单元格的大小，这是默认的 HTML 行为)。其余的列是固定的。这意味着无论它们里面有什么内容，它们的宽度都不能改变。当内容的宽度超过固定列的宽度时，它就会像 CSS 样式 overflow: hidden; 一样被隐藏。如果没有足够的水平空间来显示表格，那么应该出现一个滚动条。

Answer 1

这是我要做的:

HTML:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table {
    width: 100%;
    table-layout:fixed;
    word-wrap:break-word;
}

table td {
    width:9999px;
    border: 1px solid black;
    overflow: hidden;
}

table tr td:first-child {
    width: 10px;
    border: 1px solid black;
}

然后就是:

1. 将第一列的宽度设置为您想要的任何值。
2. 设置溢出:在表格的容器上滚动

解决方案在于 table-layout:fixed; 属性，该属性定义表格的宽度应完全与您定义的一样宽。因为这样做会弄乱您的文本(它会一直重叠)，您可以添加 word-wrap:break-word; 以将单词分成多行。

table-layout:fixed; 得到很好的支持，除了 IE/Mac ( http://caniuse.com/#search=table-layout )，word-wrap:break-word; 不太支持(即使 http://caniuse.com/#search=word-wrap 显示为其他情况，break-word 有点棘手..)，但您可以将其留在那里，因为它不会伤害您并使您的网站永不过时。

编辑 我得到了你想要的:第一列灵活，其余列固定。如果不彻底改变 html(并创建一些丑陋的非语义非性能怪物)，这是不可能的(目前)。让我来解释一下原因:

要使表格具有固定大小(所有固定列的宽度 + 某些东西)，您必须设置 table-layout:fixed;。这告诉浏览器在显示表格之前计算表格的宽度，以便它甚至可以在所有内容加载之前就呈现它(给您带来的好处:性能提升!)。但是现在你想要灵活的列，所以它必须在运行时计算宽度，我们只是阻止了这种情况，以便我们可以有固定宽度的列。

这意味着您仍然必须显式设置第一列的宽度。据我所知，这是达到你想要的效果的唯一方法。我会考虑更多，但我认为这是最好的。

EDIT 2 好的，在尝试了一些想法之后，我得出的结论是，要达到您想要的效果，您必须删除 表，并创建一个div和span的结构，左右浮动，带有display: inline-block和word -wraps ...如果您要显示的是表格数据，则不是真正的语义。并且绝对不可维护。这是你的电话...

EDIT 3 这里有一个现场演示，基于 Blowski 的 jsfiddle| : http://jsfiddle.net/ramsesoriginal/KcV9B/