レスポンシブテーブルセルで単語を分割する方法は？

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

テーブルにブートストラップカラムを使用しないでください。 "col-xs-6"はdivに最適です。私はそれが応答したい場合は、テーブルではなくdivタグを使用して、あなたのhtmlを再作成します。テーブルは本当に反応的になることは決してありませんでした。そして、手動で反応しないように修正するのは大変面倒です。