Css 如何在响应表单元格中断开单词？

下表包含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>

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

小提琴

---

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

不要对表使用引导列。“col-xs-6”最适合DIV。如果您希望html具有响应性，我会使用div标记而不是表来重新创建html。表格从来没有真正做出响应，手动修复它们的无响应性非常困难