如何使用Zurb Ink使数据表正常工作

Question

我正在使用Ink尝试从电子商务商店创建订单确认电子邮件。如果我有一个表格显示项目信息或任何类型的数据我布局，当调整大小时，最后一列嘎吱作响一个字符宽度。附加了6列单元格中的示例代码以用于代码以及输出屏幕截图。

我有什么想法可以解决这个问题吗？

                      <table class="six columns">
                    <tr>
                      <td>
                          <table width="100%">
                            <tr>
                                <td>Subtotal</td>
                                <td>$60.00</td>
                            </tr>
                            <tr>
                                <td>Shipping & Handling</td>
                                <td>$11.91</td>
                            </tr>
                            <tr>
                                <td><strong>Grand Total</strong></td>
                                <td><strong>$71.91</strong></td>
                            </tr>
                        </table>
                      </td>
                      <td class="expander"></td>
                    </tr>
                  </table>

Answer 1

墨水sub-grid在这里很有用。

<强> HTML

<table class="body">
<tr>
  <td class="center" align="center" valign="top">
    <div class="c1">
      <table class="row">
        <tr>
          <td class="wrapper">
            <table class="twelve columns">
              <tr>
                <td class="ten sub-columns">Subtotal</td>

                <td class="two sub-columns last">$10</td>

                <td class="expander"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <table class="row">
        <tr>
          <td class="wrapper">
            <table class="twelve columns">
              <tr>
                <td class="ten sub-columns">S&amp;H</td>

                <td class="two sub-columns last">$2</td>

                <td class="expander"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <table class="row">
        <tr>
          <td class="wrapper">
            <table class="twelve columns">
              <tr>
                <td class="ten sub-columns">Total</td>

                <td class="two sub-columns last">$12</td>

                <td class="expander"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </td>
</tr>
</table>

<强>截图

这里是demo。

Answer 2

我认为Ink仅用于创建响应式电子邮件布局。如果您想要更多内容，可以使用标准HTML。所以<table>与<tr>，<td>和<th>。