Question

我正在尝试创建嵌套表的分层显示，其中每个子级别都从父级进一步缩进。我愿意使用table或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>

Answer 1

看起来像几件事。你的子表缺少它的close标签，我在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中测试它看起来很有效。

Answer 2

您是否计划显示表格数据？如果不是，你最好只使用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>

当然，这取决于你想要展示的内容。

Answer 3

改变

margin-left: 20px;

到

padding-left: 20px;

在IE7，firefox和chrome上为我工作（虽然使用chrome我必须取消窗口的最大化然后重新放大它 - 对我来说看起来像渲染错误）

缩进的分层表结构

3 个答案: