Иерархическая структура таблицы с отступом - PullRequest
Новая
       7

Иерархическая структура таблицы с отступом

1 голос
/ 24 апреля 2009

Я пытаюсь создать иерархическое отображение вложенных таблиц, где каждый подуровень имеет отступ от родительского. Я открыт для использования таблицы или 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>

Ответы [ 3 ]

1 голос
/ 24 апреля 2009

Похоже на пару вещей. В вашей вспомогательной таблице отсутствовал тег close, и я добавил отступ к 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, и похоже, что оно работает.

1 голос
/ 25 апреля 2009

Планируете ли вы отображать табличные данные? Если нет, то вам лучше использовать для этого 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>

Конечно, это действительно зависит от того, что вы пытаетесь отобразить.

0 голосов
/ 24 апреля 2009

изменение 

margin-left: 20px;

до 

padding-left: 20px;

у меня работает на IE7, Firefox и Chrome (хотя с Chrome мне пришлось развернуть окно, а затем перекомпилировать его - для меня это похоже на ошибку рендеринга)

...