所以我正在尝试为电子邮件构建一个 HTML 日历。我无法弄清楚如何使最后一个 td 填充行的其余部分而不弄乱其他行的宽度。有没有办法增加最后一行第 4 个 block 的宽度来填充空白区域？
下面是一段 fiddle 代码:https://jsfiddle.net/b11cj5j0/9/
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
<tr>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
1
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
2
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
3
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
4
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
5
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
6
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
7
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
1
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
2
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
3
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
4
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
5
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
6
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
7
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
1
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
2
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
3
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
4
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
5
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
6
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
7
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
1
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
2
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
January
</td>
</tr>
<tr>
<td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
3
</td>
</tr>
</table>
</td>
<td align="left" valign="top" style="padding:5px;">
This should fill the rest of the last line
</td>
</tr>
最佳答案
是的，colspan 属性可以帮助您实现这一目标。
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
<tr>
<!-- ... previous rows and cells ... -->
<td colspan="4" align="left" valign="top" style="padding:5px;">
This should fill the last line
</td>
</tr>
</table>
...并在垂直方向合并单元格，使用rowspan。
关于html - 表的最后一 block 填充行的其余部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45419899/