[英]CSS Inline-table adds bottom margins
I have a divider containing x tables in the form:我有一个包含以下形式的 x 表的分隔线:
<div class="container">
<table>....</table>
<table>....</table>
<table>....</table>
<table>....</table>
</div>
The CSS code that corresponds to this is:这个对应的CSS代码是:
.container{
width: 100%;
clear: both;
border-bottom: solid 2px #036;
white-space: nowrap;
}
table{
display: inline-table;
border-bottom: solid 1px #000;
}
However, when this is applied, there is a gap of ~12px from the bottom border of the table and the bottom border of the divider.但是,当应用它时,表格的底部边框和分隔线的底部边框之间有 ~12px 的间隙。 If I set "margin-bottom: -12px;"
如果我设置“margin-bottom: -12px;” on the table it corrects the positioning error, but not in all browsers.
在桌子上它纠正了定位错误,但不是在所有浏览器中。
Does anyone know why there is a margin being made?有谁知道为什么要保证金?
There seems to be a problem with display: inline-table
, when you replace this with float: left
the problem is gone. display: inline-table
似乎有问题,当您将其替换为float: left
时,问题就消失了。 I have also set overflow: hidden
on the .container
div, so it takes the full height of the floating tables inside.我还在
.container
div 上设置了overflow: hidden
,所以它占用了里面浮动表的整个高度。
EDIT: In order to prevent the tables from wrapping, you could place the tables inside another left floating div that has white-space: nowrap;
编辑:为了防止表格换行,您可以将表格放在另一个具有
white-space: nowrap;
set.放。
CSS CSS
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
border-bottom: solid 2px #036;
}
.nowrap {
float: left;
overflow: hidden;
white-space: nowrap;
}
table {
float: left;
border-bottom: solid 1px #000;
border-spacing: 0px;
padding: 0px;
}
HTML HTML
<div class="container">
<div class="nowrap">
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
</div>
</div>
Test<br />
See this updated JSFiddle看到这个更新的 JSFiddle
Do you have to use <table>
?你必须使用
<table>
吗? I strongly recomended you to use <div>
instead.我强烈建议您改用
<div>
。 However in table (possibly you should add td
in your css) set border to 0. This should help.但是在表中(可能你应该在你的 css 中添加
td
)将边框设置为 0。这应该有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.