Table content single/multi-line display (3) - how to set when antd table has padding value

background

In my project, I need to achieve the effect of single-line/multi-line display when there are too many table contents. When the several methods I found before are applied to my project, there will be more or less problems. After a period of groping, I finally found a way to use it without messing up the style. The practice is documented below.

Project: antd4 + react

solved problem:

1. When several adjacent columns are displayed with ellipsis, display: -webkit-box; counting stars will cause the layout of the table to be abnormal, and the row will be arranged on the far left in the form of a column;
2. When the table content is purely alphanumeric, the word-break: break-all; attribute will cause each letter to form a separate line and the width of the column will become smaller, but the ellipsis display will be invalid after removing this attribute;
3. display: -webkit-box; attribute conflicts with padding, resulting in disordered table style, cell padding-bottom attribute displayed by multi-line ellipsis is invalid, and the table line boundary moves;
4. Using the API of antd, by adding className to each column variable to add the css style displayed by multiple lines of ellipsis, it will cause an error in the row height of the column, and the padding-bottom of each cell will be invalid, and the rows that do not meet the requirements high;

train of thought

Put the text content divin a tag and wrap it around td. The value of the table paddingis bound to tdthe , and the single/multi-line display classNameis bound to divthe label.

In other words, the basic structure of this part after rendering is:

<table>
	<tr>
		<td>  <= padding值绑定在这里
			<div class=“multiLine”>表格内容</div>
		</td>
	</tr>
</table>

practice

Single-line display example

jsx file:

const columns = [
	{
    
    
		key: "name",
		dataIndex: "name",
		title: "名称",
	},
	{
    
    
		key: "productType",
		dataIndex: "productType",
		title: "产品类型",
	}
	.......
];

const dataSource=[
	{
    
    
		key: "1",
		name:"BankBankBank123456789",
		productType:"理财2378927893",
		......
	},
	......
]

<Table className="singleElliTable" dataSource={
    
    dataSource} columns={
    
    columns} />

less file:

.singleElliTable {
    
    
	table {
    
    
		table-layout: fixed !important;
		word-break: break-all;
	}
	.ant-table-tbody > tr > td {
    
     // 来源于antd的自带样式
	// 如果是只有某一列需要单行展示，可以采用.ant-table-tbody > tr > td:nth-child()这种形式
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

Example of multi-line display

When displaying multiple lines,

• The content of the table must be wrapped in a divtag, otherwise there will be style problems, set it in columnsthe of .render

jsx file:

const columns = [
	{
    
    
		key: "name",
		dataIndex: "name",
		title: "名称",
		render: (text) => <div>{
    
    text}</div>, // 这里是必须的
	},
	{
    
    
		key: "productType",
		dataIndex: "productType",
		title: "产品类型",
		render: (text) => <div>{
    
    text}</div>,
	}
	.......
];

const dataSource=[
	{
    
    
		key: "1",
		name:"BankBankBank123456789",
		productType:"理财2378927893",
		......
	},
	......
]

<Table className="multiElliTable" dataSource={
    
    dataSource} columns={
    
    columns} />

less file:

// 单独设置需要多行展示
@multiLineNum: 2

// 加给需要多行展示的table的类名
.multiElliTable {
    
    
	table {
    
    
		table-layout:fixed !important; // 注意这个属性会使得table按照设定好的width固定展示，不会再被撑开
		word-break: break-all; // 保证纯字母数字也能完全展示

		div {
    
     // 设置给表格内容外层的div的
			.multiElliColumn();
		}
	}
}

.multiElliColumn(){
    
    
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: @multiLineNum;
	-webkit-box-orient: vertical;
	word-break: break-all; // 使连续的字母或数字在换行时拆分
	height: auto;
}