主页
问答

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

qintian1114 2007-12-17 09:41:37

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

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

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

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

请各位帮忙，谢谢！

...全文

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>

回复赞

发动态

发帖子

CSS

创建于2007-09-28

加入

5.9w+

社区成员

6.0w+

社区内容

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

申请成为版主

社区公告

暂无公告