欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap表格內(nèi)容過長時用省略號表示的解決方法

 更新時間：2017年11月21日 15:35:07   作者：彩筆_小qing  
這篇文章主要介紹了bootstrap表格內(nèi)容過長時用省略號表示的解決方法,需要的朋友可以參考下

首先 ，bootstrap中當(dāng)td內(nèi)容超過我給的固定寬度時，省略號代替的代碼如下：

<table class="table table-bordered">
   <thead>
     <tr>
       <th class="center" style='width:38%;'>商品名稱</th>
       <th class="center" style='width:36%;'>詳細(xì)介紹</th>
       <th class="center" style='width:22%;'>購買數(shù)量</th>
     </tr>
   </thead>
   <tbody id="tbody">
     <tr>
      <td>自由行機(jī)票享超值優(yōu)惠</td>
      <td>隨心所欲安排行程</td>
      <td>70</td>
    </tr>
    <tr>
      <td>自由行機(jī)票享超值優(yōu)惠</td>
      <td>隨心所欲安排行程</td>
      <td>70</td>
    </tr>   
    <tr>
      <td>自由行機(jī)票享超值優(yōu)惠</td>
      <td>隨心所欲安排行程</td>
      <td>70</td>
    </tr>            
   </tbody>               
 </table>
.table tbody tr td{
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 }

移動端模擬器顯示效果是這樣的。不是很舒服,完全沒按我給他的寬度顯示，全靠內(nèi)容擠出來的。

這里寫圖片描述 

解決方法：

<table class="table table-bordered" style='table-layout:fixed;'>

也就是添加樣式

table{
 table-layout:fixed;
}

效果出現(xiàn)：

這里寫圖片描述

table-layout用來顯示表格單元格、行、列的算法規(guī)則。值 描述

automatic 默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。
fixed 列寬由表格寬度和列寬度設(shè)定。
inherit 規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

總結(jié)

以上所述是小編給大家介紹的bootstrap表格內(nèi)容過長時用省略號表示的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論