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

我在右边有一张表，表中包含了关于其项目的详细信息，我需要将所有单元格都放在一列中，列的宽度与最长的单元格的宽度完全相同，如下面的屏幕截图所示：

如果我使用一个普通的表，这是可行的，但是现在我需要在它上面添加一个手风琴函数，所以当我点击一行时，该行的相关内容将从每一行下面滑下

在表行之间添加这些内容div的唯一方法是将它们包装在

标记中，这不适用于

slideDown（）

和

slideUp（）

效果

现在，我用

标记重新创建了这个表，希望用CSS解决这个问题，但没有这样的运气。这里有一个链接：-除了宽度问题之外，一切都正常工作

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

---

有什么想法吗？

您不能向上滑动

标签，但可以向上滑动

标签。不确定这是否适合你，但值得考虑

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

---

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

事情会很简单，使用jQuery UI动画等

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

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

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

这是一个工作示例：

这就是您需要的：

css:

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

<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;        
});

Html:

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

<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;        
});

有乐趣造型它。。。

---

（已测试）

是的，为什么不使用colspan在td中添加content div，并使用普通表格将content div滑入td中？为什么不使用该表格并应用手风琴效果，而不是创建一个解决方案，在该解决方案中，您获取表格数据并将其显示在

dl

和

dt

s中？将此作为将手风琴效果应用于表格的示例，答案中甚至有一个JSFIDLE示例，完全按照您的要求执行。单击行-显示详细信息在这些情况下，我通常不使用jQueryUI小部件（事实上，我从未使用过它们）；相反，我编写自己的来满足我的需要（例如，展开/折叠表行）；这只是几行使用jQueryUI动画的代码，整个过程都从中受益匪浅。实际上，我昨天尝试了这种方法，但我太累了，我想不出如何消除隐藏的

造成的额外空间。空格是由

上的

边框间距造成的。呃，我的否决票是当之无愧的。下次我会在提问前小睡一会儿。谢谢你的帮助！