Nested table increasing the width of the outer table
I have a nested table as:
<table border="0" width="75开发者_如何学运维0" cellspacing="0" cellpadding="0">
<tr align="center">
<td width="530">
<table border="0" cellspacing="0" cellpadding="0" width="530">
<tr>
<td>
<tr>
<td width="14"></td>
<td width="177">
<p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: left; margin-left: 0px; padding-top: 0px;">Expand Your Reach</p>
<ul style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; list-style-image:url(http://demo.frostmiller.com/sss104/images/bullet.jpg);text-align:left; margin-left: 25px; padding:0; list-style-position:outside;">
<li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
</ul>
<br />
</td>
<td width="29"></td>
</tr>
<tr>
<td colspan="3">
<hr width="220" />
</td>
</tr>
<tr>
<td width="14"></td>
<td width="177" align="left">
<p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: left;">Contact Info</p>
<p style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; text-align: left; margin-bottom: 2cm;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer .</p>
</td>
<td width="29"></td>
</tr>
</td>
</tr>
</table>
</td>
<td width="220">
</td>
</tr>
</table>
I am creating an html email, hence no other option but to nest tables.
Here as soon as I include the inner table of width 530 inside the cell of width 530, the border of the outer table gets misaligned and widens. How can I stop this?
Your HTML is invalid, the tables are wrongly nested (there's extra
trandtdelements in there)The maths don't add up so it's hard to figure what you're doing, the nested table is
14+177+29 = 220but you have it inside the530cellIf you fix the nesting and change
<td width="530"> <table border="0" cellspacing="0" cellpadding="0" width="530">to:
<td width="530"> <table border="0" cellspacing="0" cellpadding="0" width="100%">it should fix any alignment problems that are still left
Add colspan="4" to the outer <td> that houses the nested <table>.
Try to add the following css to the outer table:
table-layout: fixed;
It doesn't allow the outer table to be wider than the set value of width. Example:
table {
border-collapse: collapse;
}
td {
padding: 10px;
}
.outer-table, .outer-table td {
border: 1px solid green;
}
.outer-table {
width: 300px;
/* Don't allow outer table to have width bigger than the set value (300px) */
table-layout: fixed;
}
.inner-table {
/* The width is bigger than the width of the outer table */
width: 500px;
}
.inner-table, .inner-table td {
border: 1px solid red;
}
.inner-table-parent {
/* Allow to scroll nested table */
overflow-x: auto;
}<html>
<body>
<table class="outer-table">
<tr>
<td>First column of outer table</td>
<td class="inner-table-parent">
<div>Second column of outer table with a nested table having width bigger that the outer</div>
<table class="inner-table">
<tr>
<td>First column of inner table</td>
<td>Second column of inner table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论