如何將兩張桌子放在一起佔據相同的寬度

Question

我想知道如何將兩張桌子放在一起並佔據相同的寬度。

這裏是例如HTML：

<div class="wd100 gridcntnr"> 
<table class="wd100 bgred"> 
    <tbody> 
     <tr> 
      <td>LOREM IPSUM</td> 
      <td>NAME</td> 
      <td>ABC</td> 
     </tr> 
    </tbody> 
</table> 
<table class="wd100"> 
    <thead> 
     <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
     <th>Header 4</th> 
     <th>Header 5</th> 
     <th>Header 6</th> 
     <th>Header 7</th> 
     <th>Header 8</th> 
     <th>Header 9</th> 
     <th>Header 10</th> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
     <th>Header 4</th> 
     <th>Header 5</th> 
     <th>Header 6</th> 
     <th>Header 7</th> 
     <th>Header 8</th> 
     <th>Header 9</th> 
     <th>Header 10</th> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
     <th>Header 4</th> 
     <th>Header 5</th> 
     <th>Header 6</th> 
     <th>Header 7</th> 
     <th>Header 8</th> 
     <th>Header 9</th> 
     <th>Header 10</th> 
     </tr> 

    </thead> 
    <tbody> 
    </tbody> 
</table> 
    </div> 

相應的CSS是：

.gridcntnr{ 
overflow:auto; 
border: 1px solid black; 
} 
.wd100{ 
    width: 100%; 
} 
.bgred{ 
    background-color:red; 
} 

我想知道爲什麼會出現在兩個表的安排差異（額外的空間出現在右邊的頂部桌子）以及如何將兩個桌子放在一起並佔據相同的寬度。

我試過使用table-layout：fixed;但是這樣做第二張桌子變得結實，出現在右側頂部表格中的額外空間並未完全移除。

任何幫助，將不勝感激。請貢獻。

Answer 1

您是否按照以下文檔嘗試過絕對定位？ - >http://www.htmldog.com/guides/css/intermediate/layout/

Answer 2

您可以通過多種方式將一張桌子放在另一張桌子的上面。舉例來說，你可以申請陰性切緣第二表來像這樣：

.gridcntnr>table:last-child { 
    margin-top: -25px; 
} 

關於額外的空間，以第一個表的權利，其內容要求的表會消耗盡可能多的空間。第二個表格中的行中的單元格比第一個表格中的行要多得多。第一個表格佔用您定義的100％寬度，但該寬度相對於其父元素div。第二個表溢出了其父項的整個寬度，需要滾動。解決此問題的唯一方法是使用一個監視器，該監視器可以適合頁面上第二個表的所有內容而無需滾動。那麼在第一個表的右邊就沒有額外的空間了。

但是你爲什麼用這種方式使用表？使用語義標記你可能會找到更容易的時間。如果顯示數據，請拆分表格以更簡單明瞭的方式顯示內容。

Answer 3

你需要有一個位置的父容器：relative;和一個位置的孩子：絕對;像這樣：

.gridcntnr { 
    position:relative; 
    overflow:auto; 
    border: 1px solid black; 
} 
.gridcntnr .wd100 { 
    position:absolute; 
    width: 100%; 
} 
.gridcntnr .bgred { 
    position:absolute; 
    background-color:red; 
} 

Answer 4

您可以實現通過周圍的div的display CSS屬性設置爲table或inline-table

.gridcntnr{ 
    display:inline-table; 
    overflow:auto; 
    border: 1px solid black; 
}