HTML下鑽表格：設計

我想弄清楚根據標籤構造HTML下鑽表格的最佳方法。它需要很簡單，但最重要的是它應該合乎邏輯。HTML下鑽表格：設計

有沒有關於如何做到這一點的首選標準？你會推薦什麼？

一種可能的解決方案是'colspan'。

<tbody> 
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr> 
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr> 
<tr style=hidden><td colspan=3>drilldown data goes here...</td></tr> 
</tbody>

另一個解決辦法是 'TBODY'：

<tbody> 
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr> 
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr> 
</tbody> 
<tbody id=DrilldownDataOfRow2 style=hidden> 
<tr><td></td><td>drilldown data goes here...</td></tr> 
</tbody>

來源

2011-03-01 David

啊，還有一件事。它需要是有效的html代碼。（我不認爲在一個表中允許有多個tbody標記 – David 2011-03-01 13:14:23

說明：我關心的是如何以合理的方式將彙總行與深入數據「連接」（深入數據的展開/摺疊由JavaScript處理） – David 2011-03-01 13:22:51

多個tbody元素是有效的 - 它們是唯一可用於分組主體行的標記：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3 – 2011-03-01 13:36:56

其實我不得不做一個客戶端類似的東西。如上所述，您可以擁有多個tbody和thead標籤，這些標籤將用於邏輯分組您的數據。這種情況下的thead將是'連接器'。

<table> 
    <thead> 
    <tr>Summary Row 
    <tbody> 
    <tr>Dropdown Rows/Data 
    <thead> 
    <tr>Summary Row 
    <tbody> 
    <tr>Dropdown Rows/Data

這是簡化，但你明白了。結構變得更加有組織，你可以用js做更多的事情。

我用我在項目中使用的方法創建了一個jsFiddle。

來源

2013-03-07 18:17:34

不錯，雖然有點晚:) – David 2013-03-08 08:46:38

HTML下鑽表格：設計

回答

相關問題