2

我正在尝试创建嵌套表的分层显示，其中每个子级别都从父级进一步缩进。我愿意使用表格或 div。我最接近的是下面。它在 IE 中看起来大部分是正确的（除了右边的边框被混合在一起）。在 Chrome 中，子项边框超出了右侧的父项。

我也愿意使用 div。

<html> 
<head> 
<style type="text/css"> 
.ItemTable
{
    width: 100%;
    margin-left: 20px;
    border: solid 1px #dbdce3;
}
</style> 
</head> 
<body> 
    <table class="ItemTable">
        <tr>
            <td>Item 1</td>
        </tr>
        <tr>
            <td>
                <table class="ItemTable">
                    <tr>
                        <td>Item  1A</td>
                    </tr>
            </td>
        </tr>
    </table>
</body> 
</html>
4

3 回答 3

2

看起来有几件事。您的子表缺少它的关闭标记，我在 TD 中添加了填充以帮助缩进：

<style type="text/css">
    .ItemTable
    {
        width: 100%;

        border: solid 1px #dbdce3;
    }
    .ItemTable td
    {
        width: auto;
        padding-left: 20px;
        border: solid 1px #dbdce3;
    }
</style>


<table class="ItemTable">
    <tr>
        <td>
            Item 1
        </td>
    </tr>
    <tr>
        <td>
            <table class="ItemTable">
                <tr>
                    <td>
                        Item 1A
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

在 Chrome、FF、IE6、IE7 和 Safari 中对其进行了测试，看起来它可以正常工作。

于 2009-04-24T15:12:17.343 回答
1

您打算显示表格数据吗？如果不是这样，您最好只使用 div 并为子元素应用边距，如下所示

<style>
    #container {border:1px solid #999}
    .indent {margin-left:50px; border:1px solid #999;}
    .item {background:#99cc00;}
</style>

<div id="container">
    <span class="item">This is item 1</span>

    <div class="indent">
        <span class="item">This is item 2</span>

        <div class="indent">
            <span class="item">This is item 3</span>
        </div>

    </div>

</div>

当然，这实际上取决于您要显示的内容。

于 2009-04-25T19:51:36.460 回答
0

改变

margin-left: 20px;

至

padding-left: 20px;

在 IE7、firefox 和 chrome 上为我工作（尽管使用 chrome 我不得不取消最大化窗口然后重新最大化它 - 对我来说看起来像是一个渲染错误）

于 2009-04-24T15:09:17.677 回答