ブートストラップテーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します-jsチュートリアル-php.cn

ブートストラップテーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します

PHPz

リリース： 2018-10-16 15:58:05

オリジナル

5860 人が閲覧しました

この記事では、ブートストラップテーブルの内容が長すぎる場合に省略記号を使用して示す解決策を主に紹介します。必要な友人が参考になれば幸いです。

まず、ブートストラップの td コンテンツが私が指定した固定幅を超えた場合、省略記号を置き換えるコードは次のとおりです:

[関連ビデオの推奨: ブートストラップチュートリアル]

<table class="table table-bordered">
   <thead>
     <tr>
       <th class="center" style=&#39;width:38%;&#39;>商品名称</th>
       <th class="center" style=&#39;width:36%;&#39;>详细介绍</th>
       <th class="center" style=&#39;width:22%;&#39;>购买数量</th>
     </tr>
   </thead>
   <tbody id="tbody">
     <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>   
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>            
   </tbody>               
 </table>
.table tbody tr td{
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 }

ログイン後にコピー

の表示効果モバイルシミュレーターはこんな感じです。指定した幅通りに表示されず、コンテンツによってすべてが圧迫されてしまいます。

ブートストラップテーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します

解決策:

<table class="table table-bordered" style=&#39;table-layout:fixed;&#39;>

ログイン後にコピー

つまり、スタイルを追加します

table{
 table-layout:fixed;
}

ログイン後にコピー

効果が表示されます:

ブートストラップテーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します

table-layout は、テーブルのセル、行、列のアルゴリズムルールを表示するために使用されます。値説明

自動デフォルト。列の幅はセルの内容によって設定されます。
固定列幅はテーブル幅と列幅によって設定されます。
inherit は、table-layout 属性の値が親要素から継承される必要があることを指定します。

ブートストラップ テーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します

ブートストラップテーブルの内容が長すぎる場合は、省略記号を使用して詳細な説明を示します