インデントされた階層テーブル構造

各サブレベルが親からさらにインデントされているネストしたテーブルの階層表示を作成しようとしています。私はテーブルやdivを使用することにオープンしています。私が一番近かったのは以下の通りです。これは、IEでほとんど正しいと見えます（ただし、右側の枠線は一緒にマッシュされています）。 Chromeでは、サブアイテムの境界線が右側の親を超えて拡張されています。インデントされた階層テーブル構造

divsも使用できます。 IE7、Firefoxとクロームの私のため

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

出典

2009-04-24 Anonymous

クローズタグが1つあります –

変更

margin-left: 20px;

padding-left: 20px;

に作品（クロムと私は非最大化ウィンドウに持っていたものの、それをremaximise - のように見えます私にレンダリングのバグ）

出典

2009-04-24 15:09:17

いくつかのように見えます。あなたのサブテーブルは、それが近いタグの欠落していたと私はインデントを助けるために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>

はクロム、FF、IE6、IE7とSafariでそれをテストし、それが動作するように見えます。

出典

2009-04-24 15:12:17 CodeLikeBeaker

表形式のデータを表示する予定ですか？

もちろん

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

下に示すようにあなたは、このためだけにするdivのを使用して、ちょうど子要素にマージンを適用する方が良いだろうでない場合、それは本当にあなたが表示しようとしているかに依存します。

出典

2009-04-25 19:51:36 Phunky

インデントされた階層テーブル構造

答えて

関連する問題