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