1. 程式人生 > >table td中的內容過長,顯示為固定長度,多余部分用省略號顯示

table td中的內容過長,顯示為固定長度,多余部分用省略號顯示

感謝 striped itl details log 不換行 column 描述 圖片

簡單描述:table數據過長,結果頂到下一格,影響了數據的查看

技術分享圖片

解決辦法: 給table 加上style屬性 另外 給td加上style標簽修飾

<table class="table table-striped table-bordered table-hover table-checkable order-column" style="table-layout:fixed;" id="table1"> 

<style>
td {
white-space:nowrap;//規定文本不換行
     overflow:hidden;//關閉滾動條
     text-overflow: ellipsis;//溢出文字顯示為省略號
}
</style>

說明:style="table-layout:fixed;"就是讓table的內部布局固定大小,用width屬性調節td的長度。

顯示的是XXX....並不是全部的內容,這時候,td標簽的title 屬性就起到關鍵作用了,td的text同時賦值給title屬性,當鼠標放到table格上,就會顯示全部的名稱了

效果:

技術分享圖片

原文鏈接:https://blog.csdn.net/tuntun1120/article/details/72903387 感謝!!!

table td中的內容過長,顯示為固定長度,多余部分用省略號顯示