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問題はなくなります。私もdivを設定overflow: hiddenした.containerので、内部のフローティングテーブルの高さ全体を取ります。

編集：テーブルが折り返されるのを防ぐために、設定されている別の左フローティングdiv内にテーブルを配置できますwhite-space: nowrap;。

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>。ただし、テーブル（おそらくtdcssに追加する必要があります）でborderを0に設定します。これは役立つはずです。

于 2012-04-10T11:40:35.580 に答える