水平扩展表

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样式溢出一样隐藏：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;。这告诉浏览器在显示表之前计算表的宽度，这样它甚至可以在加载所有内容之前呈现它（奖励你：性能提升！）。但是现在你想让一个列灵活，所以它必须在运行时计算宽度，我们只是阻止它，这样我们就可以有固定宽度的列。

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

编辑2 好的，在尝试了一些想法之后，我得出的结论是，实现你所寻求的效果的唯一方法是，你必须放弃{{1} }，创建一个table和div s的结构，左右浮动，span和自动换行...如果你要显示的是表格式的话，那就不是真正的语义数据。而且最终无法维持。这是你的电话......

编辑3 在这里你有一个基于Blowski的jsfiddle的现场演示：http://jsfiddle.net/ramsesoriginal/KcV9B/

Answer 2

需要在包含该表的任何元素上设置overflow:scroll。这应该强制滚动条出现。除此之外，您的代码应该没问题。

Answer 3

<style>
td.fixed
{
    width:200px;
    overfolw:hidden;
}
td.first
{
    width:auto;
    overflow:scroll;
}
</style>
<table>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.</td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.</td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
</table>

我认为溢出：在第一行滚动不应该给你一个滚动条，但它会将其他行固定在视口的右边。所以，基本上第一行DOES有一个明确的宽度，无论剩下的是什么视口的宽度是在固定列占用其空间之后。

当您的第一行内容推到首屏时，您将获得的滚动条是一个垂直浏览器滚动条。