table固定列的寬度,超出部分用…代替(針對普通table和antd)

一、 實現思路

我們都知道讓溢出內容變成...,只需要以下:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

表格里的內容直接引用這段代碼可不行。

因為table的寬度我們並不能控制,我們加的內容會自動撐大表格列表寬度.

關鍵的一步是給table加上一個樣式:table-layout:fixed;

這條屬性就是讓table的內部布局固定大小

歸納總結Table要實現這個功能,需要這幾個條件:

1. table寬度可控: table-layout:fixed;
2. 父層(table)寬度固定,並且設置超出隱藏:

width: 500px;
overflow: hidden;

3. 應用的列加上以下樣式:

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比較麻煩,所以就沒有放出效果圖。有什么疑問,歡迎留言