因此,这是一个您无法使用现代前端技术的电子邮件模板。我要做的是写3个圆柱线。
他们都必须在同一个TR中,因为在移动设备中,列将会是2.因此,如果我找到一种方法将这些打破到新的界限,我也会适应移动设备。
Baicly我需要这个,
进入此(在手机上)
我的结构为:
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
我需要做的是制作3个圆柱线。 td
上方的tr
有宽度,因此内部表格为100%。那么如何在不使用tr
的情况下进入新的界限?
答案 0 :(得分:0)
浮动td
并添加宽度
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width:100%;
}
td {
float: left;
width: 33.333%;
border:1px solid grey;
}
&#13;
<table>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
&#13;
答案 1 :(得分:0)
最近,我使用tr
标记构建了3个列布局。节省大量时间搞乱宽度和对齐。只需在tr
标记中为content / spacer
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>