Results 1 to 9 of 9

Thread: Embedded Table Problem

  1. #1
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    241
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Default Embedded Table Problem

    Hi Folks,

    I'm trying to code a table within a table, as follows:

    HTML Code:
    <table style="border:0; " title="PCR Compared">
    <tr>
    <td style="width:10%">&nbsp;</td>
    <td style="width:80%; ">
    <table style="border-style:solid; border:6px; padding:4px; border-spacing:8px; width:100%; ">
    <caption>Differences between PCR, Appeal, and Motion To Vacate Sentence</caption>
    <tr>
    <th style="width:30%; text-align:center; ">Procedure</th>
    <th style="width:30%; ">Deadline To File</th>
    <th style="width:40%; ">When Applicable</th>
    </tr>
    </table>
    </td>
    <td style="width:10%; ">&nbsp;</td>
    </tr>
    </table>
    I want the embedded table to occupy the middle eighty percent of the page. That ain't happening. Instead it seems to be using a much smaller percentage. Display is at https://www.marainlaw.com/page.php?here=PCR . Can someone point out my error?

    Extra Credit: The border on the embedded table is not displaying either. (Sometimes it's just not my day ;-)

    A.
    Last edited by marain; 05-29-2019 at 11:11 PM.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,879
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    This works on my machine:
    Code:
    <table style="background: red; width: 100%" title="PCR Compared">
    <tr>
    <td style="width:10%">&nbsp;</td>
    <td style="width:80%; ">
    <table style="border:6px solid green; padding:4px; border-spacing:8px; width:100%; background: yellow">
    <caption>Differences between PCR, Appeal, and Motion To Vacate Sentence</caption>
    <tr>
    <th style="width:30%; text-align:center; ">Procedure</th>
    <th style="width:30%; ">Deadline To File</th>
    <th style="width:40%; ">When Applicable</th>
    </tr>
    </table>
    </td>
    <td style="width:10%; ">&nbsp;</td>
    </tr>
    </table>

  3. The Following User Says Thank You to molendijk For This Useful Post:

    marain (05-29-2019)

  4. #3
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    241
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Default

    OK. Aside from the fact that your display is prettier, the logical difference is your insertion of width:100% into the outer table style. When I add that insertion, it works on my machine too! I would have thunk it defaulted to 100%. Thanks for the fix!

    A.

  5. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,879
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Have you considered using divs instead of tables?
    Code:
    <div style="position: relative; width: calc(100% - 30px); background: red; padding: 10px; margin: auto; text-align: center" title="PCR Compared">
    Differences between PCR, Appeal, and Motion To Vacate Sentence
    <div style="width: 80%; background: yellow; text-align: center; padding: 15px; border: 5px solid green; margin: auto; font-weight: bold; margin-top: 10px; ">
    <div style="display: inline-block; width: 27%">Procedure</div>
    <div style="display: inline-block; width: 27%">Deadline To File</div>
    <div style="display: inline-block; width: 27%">When Applicable</div>
    </div>
    </div>

  6. #5
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    241
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Default

    Hmmm. That's not something I've considered. Its sophistication appears to be above my present level of html/css mastery. (I code my own sites on the side as a relief from my "day job.") I also can't tell whether your divs suggestion would lend itself to the fact that when implemented, the table will have three more rows.

    I appreciate your follow up, take this opportunity to ask a somewhat related question: The solution to the original problem was (as you pointed out) my omitting the "width=100%" information. The need for that information would never have occurred to me, as I would have assumed that absent other specification, width would default to 100%. That assumption is obviously in error. My question is, can you steer me to where the actual default is explained?

    Thanks again.

    A.

  7. #6
    Join Date
    May 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Works for me

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,879
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Most elements don't have a default width (except, for instance, the iframe). Their width depends on the 'length' of their content, except when the width is explicitly specified. The problem with your first attempt was that the width of the inner table was a percentage of the width of the outer table, whose width was unknown.

  9. #8
    Join Date
    May 2019
    Location
    LA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Typical problem

  10. #9
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    241
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Default

    Thanks again, Molendijk..

    A.

Similar Threads

  1. Problem with Anylink menu with Simpleviewer-embedded pages
    By naugastyle in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-05-2015, 06:48 PM
  2. Content Glider problem with embedded videos in IE
    By vikenk in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-13-2013, 05:55 AM
  3. Markup Validation problem with embedded flash video
    By robertsaunders in forum Other
    Replies: 7
    Last Post: 08-04-2010, 04:58 PM
  4. Replies: 4
    Last Post: 01-18-2010, 02:42 PM
  5. embedded flash problem
    By popyaskin in forum Flash
    Replies: 1
    Last Post: 08-26-2006, 02:00 PM

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
  •