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 に答える