table固定列的寬度,超出部分用…代替(針對普通table和antd)
阿新 • • 發佈:2018-12-12
一、 實現思路
我們都知道讓溢位內容變成...,只需要以下:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
表格裡的內容直接引用這段程式碼可不行。
因為table的寬度我們並不能控制,我們加的內容會自動撐大表格列表寬度.
關鍵的一步是給table
加上一個樣式:table-layout:fixed;
這條屬性就是讓table的內部佈局固定大小
歸納總結Table要實現這個功能,需要這幾個條件:
- table寬度可控:
table-layout:fixed;
- 父層(table)寬度固定,並且設定超出隱藏:
width: 500px; overflow: hidden;
- 應用的列加上以下樣式:
white-space: nowrap; //強制不換行
overflow: hidden; //超出部分隱藏
text-overflow: ellipsis; //顯示省略符號來代表被修剪的文字
二、 普通Table
為了美觀,加了一些css樣式,大家可以忽略,重點看帶有***的即可
//css <style> table{ table-layout:fixed; //****** } .gridtable { width: 500px; //****** overflow: hidden; //****** font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; margin: 20px auto; text-align: center; } .gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } .gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } .personInfo{ white-space: nowrap; //****** overflow: hidden; //****** text-overflow: ellipsis;//****** } </style> //html <table class="gridtable"> <tr> <th style="width:100px">姓名</th> <th style="width:100px">年齡</th> <th class="personInfo">資訊</th> </tr> <tr> <td>xiaobe</td> <td>18</td> <td class="personInfo">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa</td> </tr> <tr> <td>xiaobi</td> <td>20</td> <td class="personInfo">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb</td> </tr> </table>
效果:
三、 ANT Design實現
//css table{ table-layout:fixed; } .resultColumns{ overflow: hidden; } .resultColumnsDiv{ width:92%; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } //html let columns = [ { title: '姓名', dataIndex: 'name', key: 'name', width: 150 }, { title: '年齡', dataIndex: 'age', key: 'age', width: 350, }, { title: '資訊', dataIndex: 'info', key: 'info', className: styles.resultColumns, render: (text, record) => ( <div title={record.result} className={styles.resultColumnsDiv}>{record.result}</div> ), }, ] let detectList = [{ key: 1, name: 'xiaobe', age: 18, info: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa' },{ key: 2, name: 'xiaobi', age: 20, info: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb' },] <Table className={styles.detectListTable} dataSource={detectList} columns={columns} />
注意: 我們可以不用給省略的列加寬度,給其他的列固定寬度後,antd會自動計算該列的寬度.
如果三列都設定了寬度,會導致無效的。antd還是會按照原來百分比計算
因為引入antd比較麻煩,所以就沒有放出效果圖。有什麼疑問,歡迎留言