Skip to content

Commit

Permalink
fix: table border issue (#39729)
Browse files Browse the repository at this point in the history 
* fix: table border issue

* chore: code clean

* docs: update demo

* fix: table borderRadius

* chore: add comment
  • Loading branch information
@MadCcc
MadCcc committed Dec 22, 2022
1 parent 117175c commit 3307a8b
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 66 deletions.
44 changes: 22 additions & 22 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Expand Up @@ -1062,31 +1062,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
<td
class="ant-table-cell"
colspan="5"
>
<a>
Jim Green
</a>
</td>
<td
class="ant-table-cell"
>
42
</td>
<td
class="ant-table-cell"
>
0571-22098333
</td>
<td
class="ant-table-cell"
>
18889898888
</td>
<td
class="ant-table-cell"
>
London No. 1 Lake Park
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
Expand All @@ -1106,7 +1087,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
</td>
<td
class="ant-table-cell"
rowspan="2"
>
0575-22098909
</td>
Expand Down Expand Up @@ -1137,6 +1117,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
18
</td>
<td
class="ant-table-cell"
rowspan="2"
>
0575-22098909
</td>
<td
class="ant-table-cell"
>
Expand All @@ -1154,12 +1140,26 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
<td
class="ant-table-cell"
colspan="5"
>
<a>
Jake White
</a>
</td>
<td
class="ant-table-cell"
>
18
</td>
<td
class="ant-table-cell"
>
18900010002
</td>
<td
class="ant-table-cell"
>
Dublin No. 2 Lake Park
</td>
</tr>
</tbody>
</table>
Expand Down
44 changes: 22 additions & 22 deletions components/table/__tests__/__snapshots__/demo.test.ts.snap
View file
Expand Up @@ -850,31 +850,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
<td
class="ant-table-cell"
colspan="5"
>
<a>
Jim Green
</a>
</td>
<td
class="ant-table-cell"
>
42
</td>
<td
class="ant-table-cell"
>
0571-22098333
</td>
<td
class="ant-table-cell"
>
18889898888
</td>
<td
class="ant-table-cell"
>
London No. 1 Lake Park
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
Expand All @@ -894,7 +875,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
</td>
<td
class="ant-table-cell"
rowspan="2"
>
0575-22098909
</td>
Expand Down Expand Up @@ -925,6 +905,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
18
</td>
<td
class="ant-table-cell"
rowspan="2"
>
0575-22098909
</td>
<td
class="ant-table-cell"
>
Expand All @@ -942,12 +928,26 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
<td
class="ant-table-cell"
colspan="5"
>
<a>
Jake White
</a>
</td>
<td
class="ant-table-cell"
>
18
</td>
<td
class="ant-table-cell"
>
18900010002
</td>
<td
class="ant-table-cell"
>
Dublin No. 2 Lake Park
</td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions components/table/demo/colspan-rowspan.tsx
View file
Expand Up @@ -14,7 +14,7 @@ interface DataType {
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const sharedOnCell = (_: DataType, index: number) => {
if (index === 4) {
if (index === 1) {
return { colSpan: 0 };
}

Expand All @@ -27,7 +27,7 @@ const columns: ColumnsType<DataType> = [
dataIndex: 'name',
render: (text) => <a>{text}</a>,
onCell: (_, index) => ({
colSpan: (index as number) < 4 ? 1 : 5,
colSpan: index === 1 ? 5 : 1,
}),
},
{
Expand All @@ -40,14 +40,14 @@ const columns: ColumnsType<DataType> = [
colSpan: 2,
dataIndex: 'tel',
onCell: (_, index) => {
if (index === 2) {
if (index === 3) {
return { rowSpan: 2 };
}
// These two are merged into above cell
if (index === 3) {
if (index === 4) {
return { rowSpan: 0 };
}
if (index === 4) {
if (index === 1) {
return { colSpan: 0 };
}

Expand Down
57 changes: 40 additions & 17 deletions components/table/style/index.tsx
View file
Expand Up @@ -82,7 +82,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
tableBg,
tableRadius,
tableHeaderTextColor,
motionDurationSlow,
motionDurationMid,
tableHeaderBg,
tableHeaderCellSplitColor,
tableRowHoverBg,
Expand All @@ -104,7 +104,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
...resetComponent(token),
fontSize: tableFontSize,
background: tableBg,
borderRadius: tableRadius,
borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
},
// https://github.com/ant-design/ant-design/issues/17611
table: {
Expand Down Expand Up @@ -144,7 +144,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
textAlign: 'start',
background: tableHeaderBg,
borderBottom: tableBorder,
transition: `background ${motionDurationSlow} ease`,
transition: `background ${motionDurationMid} ease`,

"&[colspan]:not([colspan='1'])": {
textAlign: 'center',
Expand All @@ -159,7 +159,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
height: '1.6em',
backgroundColor: tableHeaderCellSplitColor,
transform: 'translateY(-50%)',
transition: `background-color ${motionDurationSlow}`,
transition: `background-color ${motionDurationMid}`,
content: '""',
},
},
Expand All @@ -170,11 +170,42 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
},

// ============================ Body ============================
// Borderless Table has unique hover style, which would be implemented with `borderTop`.
[`${componentCls}:not(${componentCls}-bordered)`]: {
[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
borderTop: tableBorder,
},

'&:last-child > td': {
borderBottom: tableBorder,
},

[`&:first-child > td,
&${componentCls}-measure-row + tr > td`]: {
borderTop: 'none',
},
},
},
},

// Bordered Table remains simple `borderBottom`.
// Ref issue: https://github.com/ant-design/ant-design/issues/38724
[`${componentCls}${componentCls}-bordered`]: {
[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
borderBottom: tableBorder,
},
},
},
},

[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
borderTop: tableBorder,
transition: `background ${motionDurationSlow}, border-color ${motionDurationSlow}`,
transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,

// ========================= Nest Table ===========================
[`
Expand All @@ -196,15 +227,6 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
},
},

'&:last-child > td': {
borderBottom: tableBorder,
},

[`&:first-child > td,
&${componentCls}-measure-row + tr > td`]: {
borderTop: 'none',
},

[`
&${componentCls}-row:hover > td,
> td${componentCls}-cell-row-hover
Expand Down Expand Up @@ -275,6 +297,7 @@ export default genComponentStyleHook('Table', (token) => {
colorTextPlaceholder,
colorTextHeading,
colorSplit,
colorBorderSecondary,
fontSize,
padding,
paddingXS,
Expand Down Expand Up @@ -312,12 +335,12 @@ export default genComponentStyleHook('Table', (token) => {
tablePaddingHorizontalMiddle: paddingXS,
tablePaddingVerticalSmall: paddingXS,
tablePaddingHorizontalSmall: paddingXS,
tableBorderColor: colorSplit,
tableBorderColor: colorBorderSecondary,
tableHeaderTextColor: colorTextHeading,
tableHeaderBg: colorFillAlterSolid,
tableFooterTextColor: colorTextHeading,
tableFooterBg: colorFillAlterSolid,
tableHeaderCellSplitColor: colorSplit,
tableHeaderCellSplitColor: colorBorderSecondary,
tableHeaderSortBg: colorFillSecondary,
tableHeaderSortHoverBg: colorFillContent,
tableHeaderIconColor: baseColorAction
Expand Down

0 comments on commit 3307a8b

Please sign in to comment.