SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Removing padding Around inner table

    This is mainly for a better understanding. I haven't done these in awhile either.

    I have a simple nested table, which I like the appearance of. But, there is padding around the inner table that I have been unsuccessfully trying to get rid of.

    How can I keep the appearance, while removing the inner padding? Any ideas...I'm depleted. Thanks.

    Code:
    <div id="nestedtable">
        <table width="100%" cellpadding="5" cellspacing="0" border="1">
            <thead>
                <tr>
                    <th colspan="2" align="center">Title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="13">
                        <table width="100%" cellpadding="5" cellspacing="0" border="1">
                            <thead>
                                <tr>
                                    <th width="50%" align="center">Subtitle 1</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Item 1</td>
                                </tr>
                                <tr>
                                    <td>Item 2</td>
                                </tr>
                                <tr>
                                    <td>Item 3</td>
                                </tr>
                                <tr>
                                    <td>Item 4</td>
                                </tr>
                                <tr>
                                    <td>Item 5</td>
                                </tr>
                                <tr>
                                    <td>Item 6</td>
                                </tr>
                                <tr>
                                    <td>Item 7</td>
                                </tr>
                                <tr>
                                    <td>Item 8</td>
                                </tr>
                                <tr>
                                    <td>Item 9</td>
                                </tr>
                                <tr>
                                    <td>Item 10</td>
                                </tr>
                                <tr>
                                    <td>Item 11</td>
                                </tr>
                                <tr>
                                    <td>Item 12</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <th width="50%" align="center">Subtitle 2</th>
                </tr>
                <tr>
                    <td>Item 1</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                </tr>
                <tr>
                    <td>Item 5</td>
                </tr>
                <tr>
                    <td>Item 6</td>
                </tr>
                <tr>
                    <td>Item 7</td>
                </tr>
                <tr>
                    <td>Item 8</td>
                </tr>
                <tr>
                    <td>Item 9</td>
                </tr>
                <tr>
                    <td>Item 10</td>
                </tr>
                <tr>
                    <td>Item 11</td>
                </tr>
                <tr>
                    <td>Item 12</td>
                </tr>
            </tbody>
        </table>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div><!-- End Nested Table -->

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have cellpadding on the outer table that is causing that padding around the inner table.

    Since you seem to want that padding on all other cells, here is the code with CSS added in-line to correct the issue:

    Code:
    <div id="nestedtable">
        <table width="100%" cellpadding="5" cellspacing="0" border="1">
            <thead>
                <tr>
                    <th colspan="2" align="center">Title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="13" style="padding:0;">
                        <table width="100%" cellpadding="5" cellspacing="0" border="1">
                            <thead>
                                <tr>
                                    <th width="50%" align="center">Subtitle 1</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Item 1</td>
                                </tr>
                                <tr>
                                    <td>Item 2</td>
                                </tr>
                                <tr>
                                    <td>Item 3</td>
                                </tr>
                                <tr>
                                    <td>Item 4</td>
                                </tr>
                                <tr>
                                    <td>Item 5</td>
                                </tr>
                                <tr>
                                    <td>Item 6</td>
                                </tr>
                                <tr>
                                    <td>Item 7</td>
                                </tr>
                                <tr>
                                    <td>Item 8</td>
                                </tr>
                                <tr>
                                    <td>Item 9</td>
                                </tr>
                                <tr>
                                    <td>Item 10</td>
                                </tr>
                                <tr>
                                    <td>Item 11</td>
                                </tr>
                                <tr>
                                    <td>Item 12</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <th width="50%" align="center">Subtitle 2</th>
                </tr>
                <tr>
                    <td>Item 1</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                </tr>
                <tr>
                    <td>Item 4</td>
                </tr>
                <tr>
                    <td>Item 5</td>
                </tr>
                <tr>
                    <td>Item 6</td>
                </tr>
                <tr>
                    <td>Item 7</td>
                </tr>
                <tr>
                    <td>Item 8</td>
                </tr>
                <tr>
                    <td>Item 9</td>
                </tr>
                <tr>
                    <td>Item 10</td>
                </tr>
                <tr>
                    <td>Item 11</td>
                </tr>
                <tr>
                    <td>Item 12</td>
                </tr>
            </tbody>
        </table>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div><!-- End Nested Table -->
    Just change the in-line style to a css class, then apply it in your external CSS document, to do it properly. Of course, you could just leave it the way it is, it still works, but is not the "best practices" method.

    Louis

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Amazing! A simple in-line style, eh? Here I was, relying on table attributes for a solution. Your method never crossed my mind.

    Teamwork is great! Thank you very, very much Louistar!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •