问题描述
这个问题已被问过多次，但提供的答案似乎都没有帮助我:
This question has been asked several times, but none of the answers provided seem to help me:
在此处查看此操作:http://jsfiddle.net/BlaM/bsQNj/2/
See this in action here: 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.
要求:
- 需要基于百分比.我无法设置绝对尺寸.
- 每行的高度不得超过一个文本行(如果我删除空格:nowrap 就会发生这种情况)
- 必须在 Chrome、Firefox 和 Internet Explorer 8+ 中工作
- 无法在彼此下方显示表格，因为打印时表格必须放在一张纸上.
我尝试了什么:
- 在里面使用宽度和溢出.什么都没改变.
- "显示:表格；"包含 div - 表格显示在彼此下方，而不是两列
- "表格布局:固定；"- 强制所有列具有相同的宽度
- 我知道第 2+3 列总共有 30% 的宽度，所以我尝试将第 1 列手动设置为 70% - 没有改变任何内容
- 内容中的零宽度空格 - 没有改变任何东西，可能是由于空格:nowrap;
- 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 spaces in content - didn't change anything, probably due to white-space: nowrap;
相关问题:
推荐答案
需要添加table-layout属性:
you need to add the table-layout property:
table-layout: fixed;
还要在表格 HTML 标签中包含 width=100%，而不仅仅是样式标签.
also include width=100% in the table HTML tag, not just the style tag.
这篇关于强制 HTML 表格不超过其容器的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！