css - 如何使用 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

Ink 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 .