HTML / CSS：跨行的表格单元格宽度相同

Question

我有这个表格，其中包含右侧项目的详细信息，我需要将所有单元格放在与最长单元格完全相同的列中，就像下面的屏幕截图一样：

如果我使用常规表，这是有效的，但现在我需要在它上面添加一个accordion函数，所以当我点击一行时，该行的相关内容将从每个下面向下滑动。

在表行之间添加这些内容div的唯一方法是将它们包装在<tr>标记中，这些标记不适用于slideDown()和slideUp()效果。

现在我使用<dl>标签在小提琴中重新创建表格，希望以某种方式使用CSS解决这个问题，但没有这样的运气。这是链接：http://jsfiddle.net/bbDYX/ - 除宽度问题外，一切正常。

我现在能想到的唯一解决方案是使用JavaScript浏览每个右侧列上的每个表格单元格，并将其宽度设置为与最高宽度单元格相同的值。但是如果可以的话，我想避免这样做。

有什么想法吗？

Answer 1

您无法向上滑动<tr>代码，但可以向上滑动<td>代码。不确定这是否适合你，但值得考虑......

$("#somerow").find("td").slideToggle(); 

Answer 2

好的，正如我在评论中所述，我会保留表格并为类似手风琴的效果创建一个“自定义小部件”。

使用jQuery UI动画等，这将非常简单。

例如，您只需使用四行代码即可创建基本的“描述切换”：

$('.mytable .description').hide();
$('.mytable').on('click', '.title', function(){
    $(this).next('.description').toggle();
});

（当然你可以通过添加效果类型，持续时间等来自定义.toggle（）。）

这是一个工作示例：http://jsfiddle.net/JAmFh/

Answer 3

这就是您所需要的：myjsfiddle

<强>的CSS：

.con1
{
width:100%;
height:50px;
background-color:#F3E2A9; 
}

<强> HTML

<table border='0' cellspacing='3' width='100%'>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
</table>

<强>脚本：

$('.con1').hide();
$('.open1').click(function() {
    $(this).parent().parent().next().find('.con1').slideToggle();    
    return false;        
});

有趣的造型吧...... （测试）