表格中的嵌套表格的高度如何随着主表格的高度变化而充满100%？

qintian1114 2007-12-17 09:41:37

一个一行两列的表格，左列嵌入一个表格，右列是内容。

怎样能使左列中的表格的高度随着右列中的内容的高度而变化使高度100%充满左列？

右列中的内容的高度是没有绝对值的，它的高度可以很短，也可以很长！

我把左列中的表格的高度设为100%是不行的，看能不能用CSS和JAVASCRIPT实现？

请各位帮忙，谢谢！

...全文

336 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qintian1114 2007-12-20

打赏
举报

真的是高手，我太崇拜你了，非常感谢！

yixianggao 2007-12-19

打赏
举报

L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

</head>

<body>

    <table id="tblContainer">

        <tr>

            <td valign="top">

                <table border="1">

                    <tr>

                        <td>1.1</td>

                        <td>1.2</td>

                    </tr>

                    <tr>

                        <td>2.1</td>

                        <td>2.2</td>

                    </tr>

                    <tr>

                        <td>3.1</td>

                        <td>3.2</td>

                    </tr>

                </table>

            </td>

            <td style="width: 100px; background-color: yellow; vertical-align: top;">一个一行两列的表格，左列嵌入一个表格，右列是内容。 <br />



怎样能使左列中的表格的高度随着右列中的内容的高度而变化使高度100%充满左列？<br /> 





右列中的内容的高度是没有绝对值的，它的高度可以很短，也可以很长！<br /> 



我把左列中的表格的高度设为100%是不行的，看能不能用CSS和JAVASCRIPT实现？<br /> 



请各位帮忙，谢谢！</td>

        </tr>

        <tr>

            <td valign="top">

                <table border="1">

                    <tr>

                        <td>1.1</td>

                        <td>1.2</td>

                    </tr>

                    <tr>

                        <td>2.1</td>

                        <td>2.2</td>

                    </tr>

                    <tr>

                        <td>3.1</td>

                        <td>3.2</td>

                    </tr>

                </table>

            </td>

            <td style="width: 100px; background-color: green; vertical-align: top;">一个一行两列的表格，左列嵌入一个表格，右列是内容。 <br />



怎样能使左列中的表格的高度随着右列中的内容的高度而变化使高度100%充满左列？</td>

        </tr>

    </table>

    <script type="text/javascript">

    <!--

var cRows = tblContainer.rows;

var row;

for (var i=0; i<cRows.length; i++)

{

    row = cRows[i];

    row.cells[0].firstChild.height = row.cells[1].offsetHeight;

}

    //-->

    </script>

</body>

</html>

qintian1114 2007-12-18

打赏
举报

谢谢大哥，可以用的！

但是我还有一个问题，

就是如果这个表格是绑定在asp.net的datagrid中的怎么办呢？

如果按上面的方法，那么datagrid中的每一条记录中的id都是tblContainer和tblTarget

这样就都重复了，也不能用 tblTarget.height = tblContainer.offsetHeight; 了，

请问这应该怎么做呢？谢谢！

yixianggao 2007-12-17

打赏
举报

IE6下好用，其他浏览器俺没测试！
L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

</head>

<body>

    <table id="tblContainer">

        <tr>

            <td valign="top">

                <table id="tblTarget" border="1">

                    <tr>

                        <td>1.1</td>

                        <td>1.2</td>

                    </tr>

                    <tr>

                        <td>2.1</td>

                        <td>2.2</td>

                    </tr>

                    <tr>

                        <td>3.1</td>

                        <td>3.2</td>

                    </tr>

                </table>

            </td>

            <td style="width: 100px; background-color: yellow; vertical-align: top;">一个一行两列的表格，左列嵌入一个表格，右列是内容。 <br />



怎样能使左列中的表格的高度随着右列中的内容的高度而变化使高度100%充满左列？<br /> 





右列中的内容的高度是没有绝对值的，它的高度可以很短，也可以很长！<br /> 



我把左列中的表格的高度设为100%是不行的，看能不能用CSS和JAVASCRIPT实现？<br /> 



请各位帮忙，谢谢！</td>

        </tr>

    </table>

<script type="text/javascript">

<!--

tblTarget.height = tblContainer.offsetHeight;

//-->

</script>

</body>

</html>