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

【问题标题】：HTML / CSS: Same table-cell width across rowsHTML / CSS：跨行相同的表格单元格宽度
【发布时间】：2018-08-27 04:26:00
【问题描述】：

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

如果我使用常规表格，这可以工作，但现在我需要在其顶部添加一个手风琴功能，因此当我单击一行时，该行的相关内容将从每个下方滑下。

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

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

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

有什么想法吗？

【问题讨论】：

是的，为什么不使用 colspan 将内容 div 添加到 td 中，然后使用普通表格将内容 div 滑动到 td 中
为什么不使用表格并应用手风琴效果而不是破解一个解决方案，在其中获取表格数据并将其显示在 dl 和 dts 中？将此 SO 视为将手风琴效果应用于表格的示例jQuery - Accordion Effect on a Table 它甚至在答案中有一个 jsFiddle 示例，完全符合您的要求。点击行 - 显示详细信息
在这些情况下，我通常不使用 jQueryUI 小部件（事实上，我从不使用它们）；相反，我自己编写以满足我的需要（例如，展开/折叠表格行）；它只是使用jQueryUI动画的几行代码，整个事情都从中受益匪浅..

标签： javascript jquery css html-table

【解决方案1】：

这就是你需要的：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;        
});

玩得开心造型... （已测试）

【讨论】：

我昨天实际上尝试了这种方法，但我太累了，我不知道如何摆脱隐藏的<tr>s 造成的额外空间。该空间是由<table> 上的border-spacing 引起的。呃，我的反对票是当之无愧的。下次我会在提问之前睡个午觉。感谢您的帮助！

【解决方案2】：

<tr> 标签不能向上滑动，但<td> 标签可以向上滑动。不确定这是否适合您，但值得考虑...

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

【讨论】：

【解决方案3】：

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

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

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

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

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

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

【讨论】：