如何打破响应表单元格中的单词？

Question

我有下表包含3列。在移动视图中，我成功地封装了电子邮件，但是包含此电子邮件的单元格仍然包含一个没有包装的电子邮件，您可以在下面的打印屏幕上看到。

HTML：

<table class="table-responsive">
    <tr>
        <td id="email-td" class="col-xs-6">
            <a href="mailto:shakira.wisoky@example.com">shakira.wisoky@example.com</a>                
        </td>
        <td class="col-xs-5">
            Blanditiis id dolores maxime blanditiis. Aut sunt quia cupiditate reprehenderit et.
        </td>
        <td class="col-xs-1">
            <button class="btn btn-danger"></button>
            <button class="btn btn-default"></button>
        </td>
    </tr>
</table>

CSS：

#email-td {
    /*max-width: */
    display: inline-block;
    word-wrap: break-word;
}

小提琴here。

如何使此电子邮件表格适合12列视图？

Answer 1

不要使用bootstrap列作为表。 ＆＃34; COL-XS-6＆＃34;最适合div。如果你想要它的响应，我会使用div标签而不是表重新创建你的html。表从来没有真正做出响应，并且很难手动修复他们的反应迟钝。