1. 首頁
  2. 問答
  3. 表的最後一塊填充行的其餘部分？

表的最後一塊填充行的其餘部分？

2017-07-31 106 views
0

所以我想爲電子郵件構建一個HTML日曆。我無法弄清楚如何使最後一個td填充行的其餘部分，而不會弄亂其他行的寬度。有沒有辦法增加最後一行的第四個塊的寬度來填充空白空間？表的最後一塊填充行的其餘部分？

這裏是下面的代碼的小提琴：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>

來源

2017-07-31 SleBluue

回答

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。

來源

2017-07-31 15:33:45 mch

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>

來源

2017-07-31 16:03:01

相關問題

 相關問題