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

我正在使用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>

最佳答案

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。

关于css - 如何使用Zurb Ink使数据表正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25880779/