-
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%"> </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%; "> </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.
-
This works on my machine:
Code:
<table style="background: red; width: 100%" title="PCR Compared">
<tr>
<td style="width:10%"> </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%; "> </td>
</tr>
</table>
-
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.
-
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>
-
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.
-
-
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.
-
-
Thanks again, Molendijk..
A.
