css - 如何在响应式表格单元格中打断单词？

Question

我有下表，其中包含 3 列。在移动 View 中，我成功包装了电子邮件，但包含此电子邮件的单元格仍然具有未包装电子邮件的状态，如您在下面的打印屏幕上所见。

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;
}

fiddle here .

如何使这个电子邮件表格适合 12 列 View ？

Answer 1

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