ansaurus

Question

Answer 1

A:

changing

margin-left: 20px;

to

padding-left: 20px;

works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)

Steve Willcock 2009-04-24 15:09:17

Answer 2

+1 A:

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.

Jason Heine 2009-04-24 15:12:17

Answer 3

A:

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.

Phunky 2009-04-25 19:51:36

ansaurus

tags:

views:

answers:

Indented hierarchical table structure

related questions