內部html爲主細節表

我想創建一個主細節表，其中一個行將包含一個子對象的細節。例如，我們可以有一個客戶，當您點擊一行時，它會展開以顯示客戶的訂單。 html可能看起來像這樣：內部html爲主細節表

<table id="report"> 
    <tr> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <!-- Details here --> 
     </td> 
    </tr> 
</table>

什麼是跨瀏覽器兼容性最好的HTML/CSS？我需要支持IE6。我想避免在裏面放一張內表。如果我使用無序列表，我可以使用CSS來獲得很好的網格效果嗎？

來源

2011-05-27 dagda1

鑑於您已經在使用表格，您不希望嵌套表格的原因是什麼，這聽起來像是解決您的需求的最合乎邏輯的方式。 – 2011-05-27 19:19:47

您可以使用UL或DIV來獲取網格效果，方法是將每行放入LI標記中，然後使用與表格列相同寬度的浮動塊元素（例如DIV）填充該LI。

<ul> 
<li> 
<div style="float: left; width: 100px">item1</div> 
<div style="float; width: 120px;">item2</div> 
... 
</li> 
...

但是你必須精確地測量浮點DIV到像素，否則它們可能會環繞並打破整個佈局。另外，如果容器div有所調整，它可能會中斷。您可以對每個LI應用clear =「both」以最大限度地減少破損。

請注意，如果您在浮動div上使用任何邊距，他們將遭受ie6中的雙重邊緣錯誤。

但這不是UL的目的。如果您試圖遵循使用表格避開任何事物的現代趨勢，則應該考慮到這正是表格應該顯示的表格數據的類型：行和數據列。使用表在語義上是正確的，我想不出沒有使用它的好處。

更不用說，如果ie6的兼容性（不幸的是，可恥）是你的項目規格的很大一部分，那麼忘了超級現代化，只是使用傳統的工作表。

理想情況下，我會停止使用colspan =「4」，並讓您的動態代碼假定它將嵌套在4列表中，並且只是循環遍歷錶行。正如傑里米B在他的評論中所說的，無論如何你已經有了一張桌子。

來源

2011-05-27 21:03:16 Frug

我明白你的觀點，但用戶選擇的瀏覽器不在我的手中，而在企業IT納粹分子手中，他們根本不會升級瀏覽器。 – dagda1 2011-05-28 01:25:46

但我的觀點正是如此。你應該停止跟隨互聯網趨勢，告訴你用div或者列表替換每個表格，因爲有時表格在語義上是正確的，並且更容易實現和維護。我並不是建議使用div來兼容ie6。我警告你不要這樣做。 – Frug 2011-06-20 21:25:06

內部html爲主細節表

回答

相關問題