Table元素的TD分爲新行

所以這是一個您不能使用現代前端技術的電子郵件模板。我必須寫的是3條圓柱線。Table元素的TD分爲新行

他們都必須在相同的TR，因爲在移動，列將會是2.所以，如果我找到一種方法來打破這些新的路線，我會適應與移動也。

Baicly我需要這個，

進入這個（移動）

我有結構爲：

<tr> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
</tr>

我需要做的是做3條圓柱線。 tr以上的td有一個寬度，所以表裏面有100％。那麼如何在沒有使用tr的情況下打入新的界限呢？

來源

2016-06-21 Zonf

您可以用標籤劃分你的表。採取不同的措施。 –

浮法td然後添加一個寬度

* { 
 
margin: 0; 
 
padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
table { 
 
    width:100%; 
 
    } 
 

 
td { 
 
    float: left; 
 
    width: 33.333%; 
 
    border:1px solid grey; 
 
}

<table> 
 
    <tr> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
    <td>content</td> 
 
</tr> 
 
</table>

來源

2016-06-21 13:53:45

Float不適用於許多電子郵件查看客戶 – Zonf

最近我一直在建設使用tr標籤3個佈局。節省大量的時間和寬度並對齊。只需在tr標籤內添加表格，以便內容/分隔符

width:100%和display:block的媒體查詢將疊加三列（從左到右）並且間隔區也將疊加。

例如：

<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tr> 
     <!-- left column --> 
     <th width="180" class="block width100"></th> 
     <!-- space --> 
     <th class="block"></th> 
     <!-- middle column --> 
     <th width="180" class="block width100"></th> 
     <!-- space --> 
     <th class="block"></th> 
     <!-- right column --> 
     <th width="180" class="block width100"></th> 
    </tr> 
</table>

來源

2016-06-22 13:30:54 Gwesolo

我需要最後一個去下一行，而不是33％，但有50％。這有用嗎？ – Zonf

Table元素的TD分爲新行

回答

相關問題