最后一块表填满了行的其余部分？

时间：2017-07-31 15:31:03

标签： html css

所以我正在尝试为电子邮件构建HTML日历。我无法弄清楚如何使最后一个td填充行的其余部分而不会弄乱其他行的宽度。有没有办法增加最后一行的第4个块的宽度来填充空白区域？

以下是代码的小提琴：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>

2 个答案:

答案 0 :(得分：1)

是的，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。

答案 1 :(得分：0)

你可以这样：

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
td + td {
  border-left: 1px solid black;
}
td:last-child {
  background: green;
}
<table>
  <tr>
    <td>td One Two Three</td>
    <td>td Two Three Four</td>
    <td>td Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
    <td>td Four Five Six</td>
    <td>&nbsp;Last</td>
  </tr>
</table>

相关问题
最新问题