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

-1

我有这张表格，其中包含有关其项目右侧的详细信息，我需要将所有单元格的宽度与最长的列宽度完全相同在下面的截图：HTML/CSS：跨行的表格单元格宽度相同

这个作品，如果我用一个普通表，但现在我需要在它上面添加一个手风琴功能，所以当我点击某一行上，该行的相关内容将从每个下面滑下来。

到表行之间添加这些内容div的唯一办法是将它们包装在<tr>标签，不与slideDown()和slideUp()影响工作。

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

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

任何想法？

来源

2013-04-17 Norbert

是啊，为什么不只是与合并单元格添加内容DIV在TD和滑动内容DIV的TD内，使用普通表 – Huangism

为什么不使用，则表和应用的折叠效果，而不是黑客了一种解决方案，您可以将表格数据显示在“dl”和“dt”中？看到这个作为应用手风琴效果的一个例子[** jQuery - 手风琴对表**的影响]（http://stackoverflow.com/questions/9026867/jquery-accordion-effect-on-a-表）它甚至在答案中有一个jsFiddle示例，正是你想要的。点击行 - 显示详细信息 – Nope

在这些情况下，我通常*不使用jQueryUI小部件（实际上，我从不使用它们）;相反，我写我自己的，以满足我的需求（例如，展开/折叠表行）;它只是使用jQueryUI动画的几行代码，整个事情从中受益匪浅.. – redShadow

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

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

来源

2013-04-17 20:19:40

我其实昨天尝试过这种方法，但我太累了，我无法弄清楚如何摆脱隐藏的额外空间'正在造成。该空间是由'

'上的'border-spacing'造成的。呃，我的低调是当之无愧的。下次我会在提问前小睡一会。谢谢你的帮助！ – Norbert

您无法向上滑动<tr>标记，但可以上移<td>标记。不知道这是否会为你工作，但值得考虑......

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

来源

2013-04-17 19:58:53

好了，正如我在评论说，我会保持表，并创建一个“自定义窗口小部件”手风琴般的效果。

的事情将是非常简单的，使用jQuery UI动画等

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

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

（当然那么你可以通过添加效果类型，持续时间，...）

这里定制.toggle（）这是一个工作示例：http://jsfiddle.net/JAmFh/

来源

2013-04-17 20:10:03 redShadow

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

回答

相关问题