如何排列兩個表格而不使其內容重疊？

我在Win XP上使用Firefox和Chrome的最新版本。我想在同一個水平面上顯示兩個表格。但是，我遇到了問題。現在我有如何排列兩個表格而不使其內容重疊？

<table width="100" style="display: inline-block;"> 
    ... 
</table> 
<table width="100" style="display: inline-block;"> 
    ... 
</table>

但是，現在，兩個表重疊，因爲第一個表的內容大於100像素。在不改變寬度的情況下，是否有人知道我可以如何更改/添加樣式，以便第二個表格將出現在第一個表格的右側，但清除第一個表格的所有內容？

謝謝 - 戴夫

來源

2012-01-11 Dave

表格文本或圖像的內容？編輯：爲什麼不在'style'內發送'width：100px;'？ – Biotox 2012-01-11 22:06:05

使用'float' - http://css-tricks.com/all-about-floats/ – 2012-01-11 22:12:43

我在上面的style屬性中添加了「float：left」，但重疊仍然發生。你指的是什麼？另外，你爲什麼在評論中輸入你的答案？ – Dave 2012-01-12 14:00:21

在你可以只設置overflow: hidden上第一臺原理，但IE瀏覽器（IE，甚至9）不會在這種情況下，正確地實現它。解決方法是包裹在div要素表和它們設置相關屬性：

<style> 
.tablediv { display: inline-block; width: 100px; overflow: hidden } 
</style> 

<div class=tablediv> 
<table> 
    ... 
</table> 
<div class=tablediv> 
<table> 
    ... 
</table>

這種方式，在不適合分配的寬度中的一個表的內容是完全缺席的渲染。所以它可能比想要的更有效，但這方面的問題並不明確。

來源

2012-01-12 14:35:17

如果您確定第一個表格的寬度不超過100像素，則可以保留第一個表格併爲第二個表格指定一個絕對位置。

不要更改顯示屬性，它會破壞事情。

來源

2012-01-12 14:43:09

如何排列兩個表格而不使其內容重疊？

回答

相關問題