html - CSS Inline-table 添加底部边距

Question

我有一个包含 x 个表的分隔线:

<div class="container">
  <table>....</table>
  <table>....</table>
  <table>....</table>
  <table>....</table>
</div>

对应的CSS代码是:

.container{
  width: 100%;
  clear: both;
  border-bottom: solid 2px #036;
  white-space: nowrap;
}

table{
  display: inline-table;
  border-bottom: solid 1px #000;
}

但是，当应用它时，表格的底部边框和分隔线的底部边框之间存在约 12px 的间隙。如果我设置“margin-bottom: -12px;”在表格上它纠正了定位错误，但不是在所有浏览器中。

有谁知道为什么会有 margin ？

Answer 1

display: inline-table 似乎有问题，当您将其替换为 float: left 时，问题就消失了。我还在 .container div 上设置了 overflow: hidden，因此它占用了内部 float 表的整个高度。

编辑:为了防止表格换行，您可以将表格放置在另一个设置了 white-space: nowrap; 的左浮动 div 中。

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

<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 />​

查看此更新 JSFiddle