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;”在表格中，它可以纠正定位错误，但不是在所有浏览器中。

有谁知道为什么会有保证金？

Answer 1

display: inline-table似乎有问题，当您用float: left替换它时，问题就消失了。我还在overflow: hidden div上设置了.container，因此它需要浮动表的全部高度。

编辑：为了防止表格换行，您可以将表格放在另一个设置了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

Answer 2

你必须使用<table>吗？我强烈建议您使用<div>代替。但是在表格中（可能你应该在你的css中添加td）将边框设置为0.这应该会有所帮助。

CSS Inline-table增加了底部边距

2 个答案: