Html Zurb墨水按钮不涉及面板中的2列

在创建HTML电子邮件时，我使用Zurb Ink框架

我有一个面板，我想在面板内部有几行水平的显示。例如：

Panel:
[assigned] 12/12/2013 12:14:00 Reboot Server
[unassigned] 12/12/2013 15:00:00 Shutdown Server

其中有一个用于分配/未分配和文本跟踪的按钮

在这段代码中，我成功地在面板内创建了面板和按钮。但是，我不能让按钮只显示两列。如何使按钮只包含两列，然后在按钮后显示文本

            <table class="row callout">
                <tr>
                    <td>
                        <table class="twelve columns">
                            <tr>
                                <td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
                                    <table class="two columns">
                                        <table class="tiny-button small radius alert">
                                            <tr>
                                                <td>
                                                    unassigned
                                                </td>
                                            </tr>
                                        </table>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

未分配

我相信子栏目就是您要寻找的内容。从Zurb文档中：

虽然墨网格不能像它的基础对应物那样嵌套，但是当一个网格不够时，墨水确实提供了一个可嵌套的子网格。通过将.sub columns类（以及编号类，与主网格相同）应用于.columns表下的标记，可以将.columns表细分为子列

标记

<table class="container">
    <tr>
        <td>

            <table class="row">
                <tr>
                    <td class="wrapper">

                        <table class="twelve columns">
                            <tr>
                                <td class="four sub-columns">
                                    <table class="button">
                                        <tr>
                                            <td> <a href="#">Assigned</a>

                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="eight sub-columns last">2/12/2013 12:14:00 Reboot Server</td>
                                <td class="expander"></td>
                            </tr>
                            <tr>
                                <td class="four sub-columns">
                                    <table class="button">
                                        <tr>
                                            <td> <a href="#">Unassigned</a>

                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="eight sub-columns last">12/12/2013 15:00:00 Shutdown Server</td>
                                <td class="expander"></td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

2013年12月2日12:14:00重新启动服务器
2013年12月12日15:00:00关闭服务器

小提琴：

来自文档：

要创建在大多数客户机中看起来很棒的按钮，请创建一个 类

按钮

以包装您的

标记。按钮扩展到整个屏幕的宽度 默认情况下，它们的容器，因此如果不希望它们全部展开 方法，考虑将它们放置在子网格或块网格元素中。

---

这意味着您可以将按钮表放在子网格元素中

您的“两列”表没有

或

。不，他正在“面板”类中搜索表，而不仅仅是子列