Отложенная иерархическая структура таблицы

Я пытаюсь создать иерархическое отображение вложенных таблиц, где каждый дополнительный уровень отступают от родителя. Я открыт для использования таблицы или div. Ближайший я пришел ниже. Он выглядит в основном корректным в IE (за исключением того, что границы справа смяты вместе). В Chrome граница субфайла выходит за пределы родителя справа.Отложенная иерархическая структура таблицы

Я открыт для использования divs.

<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

У вас есть один закрывающий тег отсутствует –

изменения

margin-left: 20px;

padding-left: 20px;

работает для меня на IE7, Firefox и хром (хотя и с хромом я должен был не-максимизировать окно, то 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>

Испытано его в Chrome, FF, IE6, IE7 и Safari, и это выглядит, как он работает.

источник

2009-04-24 15:12:17 CodeLikeBeaker

Планируете ли вы отображать табличные данные? Если вы не были бы лучше просто использовать 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-25 19:51:36 Phunky

Отложенная иерархическая структура таблицы

ответ

Смежные вопросы