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)站的支持！

您可能感興趣的文章:

基于BootStrap的前端分頁帶省略號和上下頁效果

相關(guān)文章

JavaScript時間轉(zhuǎn)換處理函數(shù)
這篇文章主要介紹了JavaScript時間轉(zhuǎn)換處理函數(shù)的方法的相關(guān)資料,需要的朋友可以參考下
2015-04-04
javascript實現(xiàn)數(shù)字倒計時特效
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁倒計時數(shù)字時鐘效果，是一款非常實用的javascript倒計時特效,具有一定參考借鑒價值,需要的朋友可以參考下
2016-03-03
在線編輯器的實現(xiàn)原理(兼容IE和FireFox)
在線編輯器的實現(xiàn)原理(兼容IE和FireFox)...
2007-03-03
用JS實現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了用JS實現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
微信小程序與h5的相互跳轉(zhuǎn)場景分析
這篇文章主要介紹了微信小程序與h5的相互跳轉(zhuǎn)場景分析,在微信小程序內(nèi)編寫webview文件,通過webview去跳轉(zhuǎn)h5,loadUrl為h5的地址,非嵌套,h5需要跳轉(zhuǎn)打開某個微信小程序,需要的朋友可以參考下
2023-10-10
簡單實現(xiàn)js選項卡切換效果
這篇文章主要為大家介紹了簡單實現(xiàn)js選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02
js實現(xiàn)二代身份證號碼驗證詳解
本文給大家分享一段超級全面的二代身份證號碼驗證程序，由JS編寫而成，可以校驗身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗碼。是身份證去偽存真的一大利器。
2014-11-11
JavaScript實現(xiàn)圖片本地預(yù)覽功能【不用上傳至服務(wù)器】
這篇文章主要介紹了JavaScript實現(xiàn)圖片本地預(yù)覽功能,針對非IE瀏覽器的HTML5濾鏡功能及IE瀏覽器的相關(guān)組件功能實現(xiàn)不上傳至服務(wù)器預(yù)覽本地圖片的效果,需要的朋友可以參考下
2017-09-09
微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
JS實現(xiàn)的四叉樹算法詳解
這篇文章主要介紹了JS實現(xiàn)的四叉樹算法,簡單分析了四叉樹的相關(guān)概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下
2018-12-12