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

我有下表，其中包含3列。在移动视图中，我成功地封装了电子邮件，但包含此电子邮件的单元格仍然包含未封装的电子邮件，如下面的打印屏幕中所示。如何打破响应表格单元格中的单词？

HTML：

<table class="table-responsive"> 
    <tr> 
     <td id="email-td" class="col-xs-6"> 
      <a href="mailto:[email protected]">[email protected]</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列视图？

来源

2017-06-20 Warrio

请勿对表使用引导列。 “col-xs-6”最适合div。如果你想让它响应，我会使用div标签而不是表格重新创建你的html。表格从来没有真正做出响应，并且手动修复它们的无响应令人烦恼地很难。

来源

2017-06-20 15:29:05

是的，这是真的，不错的想法，而不是使用div标签;） – Warrio

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

回答

相关问题