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%;'>詳細介紹</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;
}
移動端模擬器顯示效果是這樣的。不是很舒服,完全沒按我給他的寬度顯示，全靠內(nèi)容擠出來的。
解決方法：
<table class="table table-bordered" style='table-layout:fixed;'>
也就是添加樣式
table{
table-layout:fixed;
}
效果出現(xiàn)：
table-layout用來顯示表格單元格、行、列的算法規(guī)則。值 描述
automatic 默認。列寬度由單元格內(nèi)容設(shè)定。
fixed 列寬由表格寬度和列寬度設(shè)定。
inherit 規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。
總結(jié)
以上所述是小編給大家介紹的bootstrap表格內(nèi)容過長時用省略號表示的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
JS中的public和private對象,即static修飾符
先看下面的例子,它將告訴我們在JS世界中也有C#里的public , private ,及static等2012-01-01
這篇文章主要介紹了通過實例解析javascript Date對象屬性及方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對定位，通過改變 top 值實現(xiàn)向上移位置。2009-10-10
這篇文章主要介紹了在Js中去掉字符串中空格的實現(xiàn)方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript?裝飾器是一種特殊的功能，允許在不修改源代碼的情況下動態(tài)修改類和函數(shù)的行為，本文將介紹五個讓你眼前一亮的裝飾器技巧，包括裝飾函數(shù)參數(shù)、裝飾類屬性、裝飾函數(shù)返回值和裝飾函數(shù)調(diào)用,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了微信小程序通過js實現(xiàn)瀑布流布局詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗度，可能會使用到刷新 前進 后退等相關(guān)更能，本文將以此問題詳細介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用，需要的朋友可以參考下2012-11-11
在Layui中實現(xiàn)開關(guān)按鈕的效果實例
今天小編就為大家分享一篇在Layui中實現(xiàn)開關(guān)按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
實例解析package.json和最常見的scripts字段
日常開發(fā)中，現(xiàn)在的前端開發(fā)已經(jīng)被三大框架取代，其中最主流的不過vue和react，而開發(fā)這些項目的時候不得不接觸package.json這個文件，可你真的了解這個文件嗎？今天給大家聊聊package.json和最常見的scripts字段，感興趣的朋友一起看看吧2023-04-04