使表占用包含td的100%

时间:2012-05-08 14:16:34

标签: css html-table

<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的全部高度。我认为这很容易,因为我正在处理块元素但我必须丢失一些东西,因为它根本不工作没有无论我尝试什么技巧。

2 个答案:

答案 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将从那里接管。