溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

bootstrap表格內容過長時用省略號表示的解決方法

發(fā)布時間：2020-09-16 15:25:28 來源：腳本之家 閱讀：488 作者：彩筆_小qing 欄目：web開發(fā)

首先 ，bootstrap中當td內容超過我給的固定寬度時，省略號代替的代碼如下：

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

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

bootstrap表格內容過長時用省略號表示的解決方法 

解決方法：

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

也就是添加樣式

table{
 table-layout:fixed;
}

效果出現(xiàn)：

bootstrap表格內容過長時用省略號表示的解決方法

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

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

總結

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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手