在表行之间插入容器范围的元素

Question

我正在使用<table>显示一些表格数据，因为我已实施in this jsfiddle：

我省略了JS部分，因为它在这里并不重要。我将进行布线，以便点击任何一行将扩展该行的一种面板（一次只能看到一个面板）。

图像显示了我希望面板显示的方式。我需要将面板作为容器，占据包含表的元素的整个宽度（此元素比表宽）。此外，重要的是要保持最左边的表格列占据其最宽值的宽度，就像目前的情况一样。

有没有人知道实现这一目标的直接技巧？

理想情况下，这只涉及css和html;即，无需使用JS测量某些元素并设置其他人的css道具（当然JS将用于添加类和dom节点，但我不需要在解决方案中包含该位）。

Panel http://two-n.com/img/stackoverflow_entities.png

注意：

This is the closest I've gotten。它在<div>内使用绝对定位的<tr>。主要缺点是它需要使用JS来测量面板的<div>高度并将该高度应用于<tr>。将<div>置于<tr>内，这也感觉像是一个黑客，虽然它似乎在Chrome和FF中运行良好（尚未尝试IE）。

In this fiddle，我尝试使用<tr>与<td>创建colspan="3"来制作小组。这是不够的，因为它影响最左列的宽度，因为它不允许面板背景颜色延伸到表外，到容器的边缘。也许有办法进一步发挥它的作用？

我试着看看是否将<tbody>拆分为两个<tbody>（在所选行的<tr>处分开）我可以在它们之间插入面板，但不能不能让它发挥作用。

我可以从使用<table>切换到使用适当的css display道具来渲染此表 - 如果这样可以根据需要渲染面板。再一次，不确定如何。

目标浏览器是Chrome，FF，希望是IE9

Answer 1

您可以使用flexbox而不是表格，这是关于flexbox vs table的对话： flexbox vs tables, why do we need flexbox?让您了解更多主题。 这里有flexbox：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 因此，您可以让最后一个“列”一直弯曲到父容器的末尾，如您所愿。