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

【问题标题】：How can I make a data table work properly using Zurb Ink如何使用 Zurb Ink 使数据表正常工作
【发布时间】：2014-09-17 01:12:11
【问题描述】：

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

【问题讨论】：

我有同样的问题，我认为它需要用#content 或sometihng 包装，并使用自定义css 尝试覆盖INK CSS @media only screen and (max-width: 600px) table[class=body] table.column td, table[class=body] table.columns td { width: 100%!important; }

标签： css html-table zurb-ink

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：