缩进层次表结构

发布于 2024-07-18 03:19:29 字数 785 浏览 10 评论 0原文

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

原文

I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.

I'm open to using divs as well.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风透绣罗衣 2024-07-25 03:19:29

看起来有几件事。你的子表缺少它的关闭标签，我在 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 中测试了它，看起来它可以工作。

Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:

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

Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.

回复收藏 0 原文

云归处 2024-07-25 03:19:29

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

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

Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below

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

Of course it really depends on what you are trying to display.

回复收藏 0 原文