问题描述
我无法让我的桌子正常工作.内容不断溢出，我试图限制它并没有产生预期的效果.
这是我的标记:
<div class="hastitle">一些标题</div><div class="hastable"><表格><thead><tr><th></th></tr></thead><tfoot><tr><th></th></tr></tfoot><tr><td class="col1">Col 1</td><td class="col2">Col 2</td><td class="col3">Col 3</td></tr></tbody>然后我有一些风格.td's 正在溢出，但我没有运气将它们的 overflow 设置为 hidden/auto.我确实在包含该表的 hastable 类中设置溢出有更好的运气.但我仍然无法让 Firefox 尊重 width3 列的分布:30%, 35%, 35%.我也尝试设置 min-width，但仍然没有运气.我在页面上有几个这样的表格，每个表格都有自己的宽度.对这张桌子乱七八糟有什么帮助吗?
.repeatingdiv { }.hastitle { 边距:0 10px;填充:3px 3px 1px 6px;}.hastable { 溢出:隐藏；文本溢出:省略号；边距:10px；填充:10px；}桌子 { }表 tbody { 宽度:100%；}tr { 宽度:100%；}td.col1 { 宽度:30%；最小宽度:30%；}td.col2 { 宽度:35%；最小宽度:35%；}td.col3 { 宽度:35%；最小宽度:35%；}
解决方案 众所周知，表格很难设计.尝试将其添加到您的 CSS 中:
table { 表格布局:固定；宽度:100%/* 或任何固定宽度 */;}
我还建议使用实际的 HTML COL/COLGROUP 元素来定义您的列，如下所示:
<colgroup class="col1"/><colgroup class="col2"/><colgroup class="col3"/><thead><tr><th></th></tr></thead><tfoot><tr><th></th></tr></tfoot><tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr></tbody>
请注意，尽管如此，具有溢出数据的单元格将强制包含单元格、行和表格扩展以适应.CSS overflow: auto/hidden/scroll 不影响单元格.
参考:
I'm having trouble getting my table to behave. The content keeps overflowing and my attempts to restrict it are not producing the desired effect.
This is my markup:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
I then have some style. The td's are overflowing, but I didn't have any luck setting their overflow to hidden/auto. I did have better luck setting overflow in the hastable class that contains the table. But I'm still having trouble getting Firefox to respect the width distribution for the 3 columns: 30%, 35%, 35%. I also tried setting min-width, but still no luck. I have several of these tables on the page, and each one takes its own width. Any help with this table mess?
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
解决方案 Tables are notoriously difficult to style. Try adding this to your CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
I'd also suggest using actual HTML COL / COLGROUP elements to define your columns, as so:
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
Do take note that, despite this, cells with overflowing data will force the containing cell, row, and table to expand to fit. CSS overflow: auto / hidden / scroll do not affect cells.
Ref:
这篇关于Firefox 中充满 CSS 的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-12 02:44