水平扩展表格
我想创建一个具有固定大小列的表（第一个列除外，它会扩展以适合最宽的单元格）。问题是，当水平空间不足时，滚动条不会出现，列也会缩小。另外，我希望单元格在内容太长时隐藏内容。我尝试搞乱溢出，但没有帮助。这是代码：
<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;一样被隐藏。如果没有足够的水平空间来显示表格，则应该出现滚动条。
I want to create a table with fixed-size columns (except for the first one which expands to fit the widest cell). The problem is that when there's not enough space horizontally, a scrollbar does not appear and columns get shrunk. Also I want cells to hide content when it's too long. I tried messing with overflow but it didn't help. Here's the code:
<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>
EDIT:
There were many misunderstandings so I'll write everything here:
First column is as wide as it needs to be (which means that it just fits the size of the widest cell inside it, it's the default HTML behaviour). Rest of the columns are fixed. This means that no matter what content is inside them, their width cannot change. When content's width exceeds fixed column's width then it just gets hidden like in CSS style overflow: hidden;. If there's not enough horizontal space to display table then a scrollbar should appear.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这就是我要做的：
Html：
CSS：
然后只需：
解决方案在于
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好的，在尝试了一些想法之后，我得出的结论是，实现您正在寻求的效果的唯一方法是，您必须删除
表，并创建一个div和span结构，左右浮动，带有display: inline-block和自动换行。 ..如果您必须显示的是表格数据，那么这并不是真正的语义。并且绝对不可维护。这是你的决定...编辑 3 这里你有一个基于 jsfiddle 的现场演示 布洛夫斯基：http://jsfiddle.net/ramsesoriginal/KcV9B/
Here's what I'd do:
Html:
CSS:
And then just:
The solution lies in the
table-layout:fixed;property, which defines that the table should be exactly as wide as you have defined it. since doing so would mess up your text (It would overlap all the way), you can add aword-wrap:break-word;to make it break the words to multiple lines.table-layout:fixed;is pretty well supported, except for IE/Mac (http://caniuse.com/#search=table-layout),word-wrap:break-word;is less supported (even though http://caniuse.com/#search=word-wrap shows otherwise, thebreak-wordis a bit tricky..), but you can leave it there since it won't hurt you and makes your site future-proof.EDIT I got what you want: first column flexible, the rest on a fixed with. Without drastically changing the html (and creating some ugly un-semantic un-performant monster) it's not possible (at the moment). Let me explain you why:
To have the table be of a fixed size (the width of all the fixed columns + something) you have to set
table-layout:fixed;. This tells the browser to calculate the width of the table before displaying it, so that it can render it even before all the content has been loaded (bonus for you: performance boost!). But now you want to have one column flexible, so it would have to calculate the width at runtime, and we just prevented that so that we can have fixed-width columns.That means that you still have to explicitly set the width of the first column. As far as I know, that's the only way to achieve the effect you want. I'll think a bit more about it, but I think that's the best possible.
EDIT 2 Ok, after trying out some ideas, I've come to the conclusion that the only way to achieve the effect you are seeking, you'd have to drop the
table, and create a structure ofdivs andspans, floated left and right, withdisplay: inline-blockand word-wraps... not really semantic if what you have to show is tabular data. And definitively not maintainable. It's your call...EDIT 3 And here you have a live demonstration, based on the jsfiddle by Blowski: http://jsfiddle.net/ramsesoriginal/KcV9B/
需要在包含表格的任何元素上设置overflow:scroll。这应该会强制出现滚动条。除此之外，你的代码应该没问题。
The
overflow:scrollneeds to be set on whatever element is containing the table. This should force a scrollbar to appear. Other than that, your code should be OK.我认为第一行的溢出：滚动不应该给你一个滚动条，但它会将其他行固定在视口的右侧。所以，本质上第一行确实有一个确定的宽度，无论宽度的其余部分如何视口的视图是在固定列占据其空间之后。
当您的第一行内容推到折叠下方时，您将获得的滚动条是垂直浏览器滚动条。
I think the overflow:scroll on the first row should not give you a scrollbar, but it will pin the other rows to the right of the viewport.So, essentially the first row DOES have a definitive width, being whatever the remainder of the width of the viewport is after the fixed columns take their space.
The scrollbar you WILL get is a vertical browser scroll bar when your first row content pushes below the fold.