Css 缩进层次表结构_Css_Html Table_Hierarchical

Css 缩进层次表结构

css

Css 缩进层次表结构,css,html-table,hierarchical,Css,Html Table,Hierarchical,我试图创建嵌套表的分层显示，其中每个子级别都从父级进一步缩进。我愿意使用table或div。我最近的一次是在下面。它在IE中看起来基本上是正确的（除了右边的边框是混合在一起的）。在Chrome中，子项边框延伸到右侧的父项之外我也愿意使用div <html> <head> <style type="text/css"> .ItemTable { width: 100%; margin-left: 20px; border: sol

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


.ItemTable
{
宽度：100%；
左边距：20px；
边框：实心1px#dbdce3；
}
项目1
项目1A

正在更改

margin-left: 20px;

到

在IE7、firefox和chrome上对我有效（尽管使用chrome我必须先取消窗口最大化，然后再重新最大化它-对我来说，这看起来像是一个渲染错误）

看起来有几件事。您的子表缺少关闭标记，我在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>


.ItemTable
{
宽度：100%；
边框：实心1px#dbdce3；
}
.ItemTable td
{
宽度：自动；
左侧填充：20px；
边框：实心1px#dbdce3；
}
项目1
项目1A

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

您打算显示表格数据吗？如果不是这样的话，最好只使用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>


#容器{边框：1px实心#999}
.indent{左边距：50px；边框：1px实心#999；}
.项目{背景：#99cc00；}
这是项目1
这是第2项
这是第3项

当然，这取决于您试图显示的内容。

您缺少一个结束标记

<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>