TD佔用行的整個寬度

我需要爲電子郵件設置一個HTML表格，其中每列都有一個設置寬度。TD佔用行的整個寬度

左欄只是一個圖像，右面是文字。我已經設置了寬度，但無論如何，td呈現爲600px寬。

電子郵件可以被看作here

下面是代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="description" content="Fitzgerald Description"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title> 
     Fitzgerald Email 
    </title> 
</head> 
<body bgcolor="#ffffff" style="margin:0; padding:0; width:100% !important; background-color:#f8f6f2; font-family:Calibri, 'Helvetica Neue', Helvetical, Arial, Geneva, clean, sans-serif;"> 
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px; max-width:600px; margin:0 auto 0 auto;" width="600"> 
    <tbody> 
     <tr> 
      <td align="center" style="text-align:center;" width="600"> 
       <img align="none" alt="Fitzgerald Header" border="0" src="http://i.imgur.com/MLEroOA.jpg" style="width: 600px;" width="600"> 
      </td> 
     </tr> 
     <tr> 
      <td width="244"> 
      <img align="none" alt="Fitzgerald Pictures" border="0" src="http://i.imgur.com/nn93sj7.jpg" style="width:244px;" width="244"> 
      </td> 
      <td width="356"> 
      <p style="font-size:18px; color:##71032d;"> 
       Going, Going ... 
      </p> 

      </td> 
     </tr> 
     <tr> 
      <td align="center" width="600"> 
       <div style="font-size:12px; color:#9d9d9c"> 
       288 Macon Ave. | Asheville, North Carolina 28804 | 828-251-1140 | <a href="thefitzgeraldatgrovepark.com" style="color:#9d9d9c; text-decoration: none">thefitzgeraldatgrovepark.com</a> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td align="left" width="600"> 
       <p style="font-size:12px; color:#9d9d9c; margin-left:18px; margin-right:18px;"> 
       Sales by Beverly-Hanks &amp; Associates, licensed in North Carolina. This is not an offer to sell to residents of any state or province in which legal requirements have not been fulfilled. This offer is void where prohibited by law. All features, services, amenities, descriptions and other information set forth in this communication are subject to change at any time without notice. The features, services, amenities and other privileges of owners of a Residence at The Fitzgerald are limited to those included in the Purchase Agreement and the Declaration of Condominium for The Fitzgerald Condominium. Certain mandatory dues, assessments, fees and charges apply to Residences at The Fitzgerald in connection with services, features and amenities described herein, contact a Fitzgerald sales professional for details. Depictions include amenities and furniture in the Model Homes which are not included in the sale of a Residence at The Fitzgerald. 
       </p> 
      </td> 
     </tr> 
     <tr> 
      <td align="center" width="600" height="10"></td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

來源

2013-08-26 John Ruggiero

在我看來，接受的答案是錯誤的。我不會混合表和浮動，他們是兩種不同的方法。在浮動之前，所有的網頁設計都是用表格完成的，這意味着你根本不需要浮動表格來佈置表格。真的，你應該只使用表格來呈現行/列數據，但有時你可能希望表格作爲電子郵件佈局的基本回退方法。儘管目前大多數電子郵件應用程序似乎都處理浮動div。 –

您可以在此情況下，使用style="display:inline-block"和使用float:left利奧亞伯拉罕曾表示。

來源

2013-08-26 05:03:30

風格

float:left

添加到這兩個TD和嘗試。 DEMO

來源

2013-08-26 04:58:27

謝謝，你能解釋爲什麼在這種情況下浮動的作品？我認爲TD寬度只應該是顯示內容所需的寬度。 –

我只是想說明td寬度已經在HTML5中折舊了。我建議使用CSS。

td {width：244px; }

來源

2013-08-26 05:10:14 jeppy7

大多數電子郵件客戶端使用已被時間遺忘的渲染引擎，所以html5是m00t。這就是爲什麼大多數電子郵件使用表格佈局等。 – albert

非常有趣。另外，我從來沒有見過像你這樣用過的模擬詞。不得不看那一個。有趣的定義說至少 – jeppy7

我會添加這個作爲評論，而不是一個答案。 –

您在每一行中的列數不均勻。在您希望跨兩列的td元素上，指定要跨接的列數的colspan屬性。

JSFiddle

<td align="center" style="text-align:center;" width="600" colspan="2">

編輯：

沒有此colspan屬性，每個隨後的行的第一列是假設該列中最寬的單元的寬度 - 在這種情況下的所述600px的寬的第一柱第一排。

來源

2013-08-26 05:10:26

嘗試添加此樣式到您的表。

table-layout:fixed;

的默認值是「自動」我認爲這是（奇怪）更新行爲，相比於從1994-2004做表的經典方式。

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

我仍然不知道爲什麼「自動」強制「TD」佔用一整行，當再含量比表格的寬度要小得多。「自動」引擎是否有一些毛刺或怪異的行爲？不確定。

來源

2017-01-26 19:17:31

TD佔用行的整個寬度

回答

相關問題