<style>
.topTable
{
border-top:1px solid #333333;
border-right:1px solid #333333;
}
.topTable td, th
{
border-left:1px solid #333333;
border-bottom:1px solid #333333;
}
.topTable .inner
{
border-width:0px;
position:relative;
top:0px;
left:0px;
height:100%;
width:100%;
}
.topTable .container
{
padding:0px;
border-width:0px;
position:relative;
}
</style>
<table cellpadding="4" class="topTable" cellspacing="0" style="background-color:#f0f0f0;">
<tr>
<th>Option A</th>
<td class="container">
<table cellpadding="4" class="inner" cellspacing="0" style="background-color:#f0a0a0;">
<tr>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</td>
<td class="container">
<table cellpadding="4" class="inner" cellspacing="0" style="background-color:#a0f0a0;">
<tr>
<td>Part 3</td>
</tr>
<tr>
<td>Part 3</td>
</tr>
</table>
</td>
<td>Done</td>
</tr>
</table>
我需要TD中的那些表高度:100%并且似乎没有任何效果。在这种情况下我不能使用rowspan,因为数据在每个子表中都是动态的。我需要一些CSS来强制这些表占用它们存储的td的全部高度。我认为这很容易,因为我正在处理块元素但我必须丢失一些东西,因为它根本不工作没有无论我尝试什么技巧。
答案 0 :(得分:1)
这是我能做的最好的事情: http://jsfiddle.net/jc5qf/2/
希望它能让你走上正确的道路。
答案 1 :(得分:0)
使用jQuery找到解决方法。
有人发布了类似的内容,我修改了它以满足这些需求:
$(function () {
$('td.container').each(function () {
var $this = $(this);
var panelheight = $this.height();
$this.children('table.inner').height(panelheight);
})
});
只需要让每个包含td的类都是'容器',并且其中的表需要拉伸以匹配该容器的高度到'inner'这个jQuery将从那里接管。