Question

因此，这是一个您无法使用现代前端技术的电子邮件模板。我要做的是写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的情况下进入新的界限？

Answer 1

浮动td并添加宽度

＆＃13;

* {
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;

Answer 2

最近，我使用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>

Table元素的TD分为新行

2 个答案: