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下钻表格：设计

回答

相关问题