0

我有一个包含 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;” 在桌子上它纠正了定位错误，但不是在所有浏览器中。

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

4

2 回答 2

1

似乎有问题display: inline-table，当您将其替换float: left为问题时，问题就消失了。我也设置overflow: hidden了.containerdiv，所以它占用了里面浮动表的全高。

编辑：为了防止表格包装，您可以将表格放在另一个已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

于 2012-04-10T11:52:18.040 回答
0

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

于 2012-04-10T11:40:35.580 回答