將TD集中在TR中的方法？

我正在處理HTML電子郵件，並嘗試將白色TR中的綠色TD對準，以便綠色框的左側和右側有20px的白色邊距。將TD集中在TR中的方法？

我試着設置綠色部分的TD寬度，並設置邊距0自動，但綠色只擴展到TR的寬度。

試圖放入另外2臺TDs將綠色TD推入中心，但也沒有效果。

包含代碼片段，對＃a6d971有問題。

<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;"> 
    <tbody> 
     <tr> 
      <td style="margin: 0 auto;"> 
       <img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" /> 
      </td> 
     </tr> 
     <tr bgcolor="#fff" height="75"> 
      <td valign="top" style="text-align:center;"> 
       <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;"> 
        Regular sales happen every day 
       </p> 
       <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;"> 
        9am - 11pm 
       </p> 
      </td> 
     </tr> 


     <tr bgcolor="#fff" height="75" padding="10"> 
      <td bgcolor="#000" width="20"></td> 
      <td bgcolor="#a6d971" width="300" style="margin: 10;"> 
      </td> 
      <td bgcolor="#000" width="20"></td> 
     </tr> 



     <tr bgcolor="#fff"> 
      <td valign="top"> 
       <table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style=""> 
        <tbody> 
         <tr> 
          <td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;"> 
           <h3>Nine @ Nine</h3> 
           <p>Fuel up! Dresses, tunics and other items including:</p> 
          </td> 
         </tr> 




         <tr> 

         </tr> 

        </tbody> 
       </table> 
      </td> 
     </tr> 


     <tr> 
      <td style="margin: 0 auto;"> 
       <img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" /> 
      </td> 
     </tr> 
    </tbody> 
</table>

來源

2011-12-27 grace

對於所有的問題，電子郵件客戶端與CSS ......他們一般都不錯，當你想做中心框和設置一些顏色。不要濫用這個表。 – Quentin 2011-12-27 21:49:08

你有圖片來說明嗎？ – 2011-12-27 21:49:42

是否有任何特定的原因使用表？ – Purag 2011-12-27 21:50:01

切換到DIV的和CSS，大多數電子郵件客戶端支持的樣式不錯，你可以用你的TD元素內DIV，它會很容易中心或你可能想其他的事情。

對於實例

<tr style="background-color: white;"> 
    <td style="background-color: green;"> 
    <div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div> 
    </td> 
</tr>

如果你使用DIV的，你也可避免表還要注意。

來源

2011-12-27 21:56:51

真棒謝謝，這完美的作品。我以爲我試過這個，但是當我嘗試它時，它一直在弄亂其餘的內容。 – grace 2011-12-27 22:25:03

順便說一句，我不知道我們現在可以在電子郵件客戶端中使用DIV和CSS。上次我查了一下，不推薦。謝謝 – grace 2011-12-27 22:41:35

恩典是正確的，由於電子郵件客戶端向後兼容性，2018年仍不推薦。像MailChimp這樣的專業羣發郵件發件人從不使用它們。 – Amicable 2018-01-22 16:47:16

-1

如果必須使用表，還不如濫用他們一點：

<table><tr align="center"> 
    <td width="50%">one</td> 
    <td style="background-color:green">two</td> 
    <td width="50%">three</td> 
</tr></table>

http://jsfiddle.net/mblase75/yntfu/

來源

2011-12-27 21:57:18 Blazemonger

這實際上並沒有給出一個固定的20px左右的保證金... – 2011-12-27 21:58:57

這種濫用是否必須包括使用已棄用且現在不受支持（在HTML5中）的屬性？ – animuson 2011-12-27 22:01:51

哈克在黑客的頂部。

<table width="100%" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;"> 
       This is stuff. 
      </td> 
     </tr> 
    </tbody> 
</table>

http://jsfiddle.net/zy6GU/

順便說一下，同樣的事情應該有一個DIV工作：

<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>

http://jsfiddle.net/zy6GU/1/

來源

2011-12-27 22:01:10

真棒謝謝，這完美的作品。我以爲我試過這個，但是當我嘗試它時，它一直在弄亂其餘的內容。 – grace 2011-12-27 22:24:54

-1

你在談論 '的電子郵件'？你的意思是一個電子郵件地址，如<a href="mailto:[email protected]">Email Me</a>？如果是這樣，你需要一些將鏈路集中在TD中的css，或者與TD上的colspan結合使用。

來源

2011-12-27 22:03:51

我不是一個CSS專家，但這個對我的作品（沒有額外的標籤）：

<table> 
    <tr style="background-color: white; border: 1px solid black;"> 
    <td style="background-color: green; display: block; margin: 0 20px;"> 
     <!-- Content --> 
    </td> 
    </tr> 
</table>

來源

2011-12-27 22:03:57 thoferon

將TD集中在TR中的方法？

回答

相關問題