强制 HTML 表格不超过其容器的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17969877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force HTML Tables To Not Exceed Their Containers' Size
提问by BlaM
This question has been asked several times, but none of the answers provided seem to help me:
这个问题已被问过多次，但提供的答案似乎都没有帮助我：
See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/
在此处查看此操作：http: //jsfiddle.net/BlaM/bsQNj/2/
I have a "dynamic" (percentage based) layout with two columns.
我有一个带有两列的“动态”（基于百分比）布局。
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
In each of these columns I have a table that is supposed to use the full column width.
在这些列的每一列中，我都有一个应该使用完整列宽的表格。
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.
我的问题是该表格中的某些列的内容需要截断以适应表格的给定宽度。不过，这不会发生。我得到两个相互重叠的表。
Requirements:
要求：
- Needs to be percentage based. I can't set absolute sizes.
- Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
- Must work in Chrome, Firefox and Internet Explorer 8+
- Can't display tables below each other as it has to fit onto one sheet of paper when printing.
- 需要基于百分比。我无法设置绝对尺寸。
- 每行的高度不得超过一个文本行（如果我删除空格：nowrap 会发生这种情况）
- 必须在 Chrome、Firefox 和 Internet Explorer 8+ 中工作
- 不能在彼此下方显示表格，因为打印时它必须适合一张纸。
What I tried:
我试过的：
- inside of and use width and overflow on that. Changed nothing.
- "display: table;" on containing div - instead of having two columns the tables were displayed below each other
- "table-layout: fixed;" - Forced all columns to have same width
- I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
- Zero-width spacesin content - didn't change anything, probably due to white-space: nowrap;
- 里面并使用宽度和溢出。什么都没变。
- “显示：表；” 包含 div - 表格不是两列，而是显示在彼此下方
- “表布局：固定；” - 强制所有列具有相同的宽度
- 我知道第 2+3 列总共有 30% 的宽度，所以我尝试将第 1 列手动设置为 70% - 没有改变任何东西
- 内容中的零宽度空格- 没有改变任何东西，可能是由于空白： nowrap;
Related Questions:
相关问题：
回答by eudemonics
you need to add the table-layout property:
您需要添加 table-layout 属性：
table-layout: fixed;
also include width=100% in the table HTML tag, not just the style tag.
还要在表格 HTML 标签中包含 width=100%，而不仅仅是样式标签。
回答by CyberAP
Maybe you'll be interested in a max-width: 0;hack I've discovered.
也许你会对max-width: 0;我发现的一个黑客感兴趣。
It has some limits, we should use CSS tables instead of HTML, but it works:
它有一些限制，我们应该使用 CSS 表格而不是 HTML，但它有效：
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
回答by Mr Lister
Measurements on tables work differently. In general, width on a table cell is handled as min-width.
桌子上的测量工作不同。通常，表格单元格的宽度作为最小宽度处理。
One solution, if you don't mind adding extra markup, is to put a divinside each table cell in which you put the content. Then give this div a width, or a max-width. So
如果您不介意添加额外的标记，一种解决方案是div在您放置内容的每个表格单元格内放置一个。然后给这个 div 一个宽度，或者一个最大宽度。所以
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
becomes
变成
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
and so on.
等等。
See updated fiddle: http://jsfiddle.net/bsQNj/4/
查看更新的小提琴：http: //jsfiddle.net/bsQNj/4/
Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.
编辑：我看到小提琴需要一些工作 - 我忘记在需要的地方放置一些 div。但我希望你能用这个想法工作。
回答by Kris Roofe
.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>回答by RAC
In your CSS:
在你的 CSS 中：
table {
table-layout: auto;
width: 100%;
}
That should cover all tables
这应该涵盖所有表格
