mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
fix: nested unbordered table inside a bordered table has border. (#24995)
* fix: nested unbordered table inside a bordered table has border. * docs: debug nested bordered table * test: update snapshot * fix: nested table border overlap * test: update snapshot
This commit is contained in:
07akioni
GitHub
parent
e54df4a41e
commit
8dc16037d0
@ -10541,6 +10541,414 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/nest-table-border-debug.md correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
class="ant-form ant-form-inline components-table-demo-control-bar"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Root Table Bordered"
|
||||
>
|
||||
Root Table Bordered
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Child Table Bordered"
|
||||
>
|
||||
Child Table Bordered
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
<div
|
||||
class="ant-table-wrapper components-table-demo-nested"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-table-title"
|
||||
>
|
||||
cool
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
class="ant-table-expand-icon-col"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell"
|
||||
/>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Platform
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Version
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Upgraded
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Creator
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Screem
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
iOS
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
10.3.4.5654
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
500
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2014-12-24 23:12:00
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Publish
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-footer"
|
||||
>
|
||||
cool
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper components-table-demo-nested"
|
||||
|
||||
129
components/table/demo/nest-table-border-debug.md
Normal file
129
components/table/demo/nest-table-border-debug.md
Normal file
@ -0,0 +1,129 @@
|
||||
---
|
||||
order: 98
|
||||
title:
|
||||
en-US: Nested Bordered Table Debug
|
||||
zh-CN: 嵌套带边框的表格 Debug
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
看看边框的样式是不是影响到别的表格。
|
||||
|
||||
## en-US
|
||||
|
||||
To see if bordered style applied to other tables.
|
||||
|
||||
```jsx
|
||||
import { Table, Badge, Menu, Dropdown, Switch, Form } from 'antd';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item>Action 1</Menu.Item>
|
||||
<Menu.Item>Action 2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
function NestedTable() {
|
||||
const createExpandedRowRender = bordered => {
|
||||
return () => {
|
||||
const columns = [
|
||||
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'state',
|
||||
render: () => (
|
||||
<span>
|
||||
<Badge status="success" />
|
||||
Finished
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
render: () => (
|
||||
<span className="table-operation">
|
||||
<a>Pause</a>
|
||||
<a>Stop</a>
|
||||
<Dropdown overlay={menu}>
|
||||
<a>
|
||||
More <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
date: '2014-12-24 23:12:00',
|
||||
name: 'This is production name',
|
||||
upgradeNum: 'Upgraded: 56',
|
||||
});
|
||||
}
|
||||
return <Table columns={columns} dataSource={data} pagination={false} bordered={bordered} />;
|
||||
};
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
|
||||
{ title: 'Version', dataIndex: 'version', key: 'version' },
|
||||
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
|
||||
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
|
||||
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'Screem',
|
||||
platform: 'iOS',
|
||||
version: '10.3.4.5654',
|
||||
upgradeNum: 500,
|
||||
creator: 'Jack',
|
||||
createdAt: '2014-12-24 23:12:00',
|
||||
});
|
||||
}
|
||||
|
||||
const [rootTableBordered, setRootTableBordered] = React.useState(true);
|
||||
const [childTableBordered, setChildTableBordered] = React.useState(true);
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
layout="inline"
|
||||
className="components-table-demo-control-bar"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item label="Root Table Bordered">
|
||||
<Switch checked={rootTableBordered} onChange={v => setRootTableBordered(v)} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Child Table Bordered">
|
||||
<Switch checked={childTableBordered} onChange={v => setChildTableBordered(v)} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Table
|
||||
title={() => 'cool'}
|
||||
footer={() => 'cool'}
|
||||
className="components-table-demo-nested"
|
||||
columns={columns}
|
||||
expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }}
|
||||
dataSource={data}
|
||||
bordered={rootTableBordered}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<NestedTable />, mountNode);
|
||||
```
|
||||
@ -5,79 +5,114 @@
|
||||
|
||||
.@{table-prefix-cls}.@{table-prefix-cls}-bordered {
|
||||
// ============================ Title =============================
|
||||
.@{table-prefix-cls}-title {
|
||||
> .@{table-prefix-cls}-title {
|
||||
border: @table-border;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// ============================= Cell =============================
|
||||
thead > tr > th,
|
||||
tbody > tr > td,
|
||||
tfoot > tr > th,
|
||||
tfoot > tr > td {
|
||||
border-right: @table-border;
|
||||
}
|
||||
> .@{table-prefix-cls}-container {
|
||||
// ============================ Content ============================
|
||||
border: @table-border;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
// Fixed right should provides additional border
|
||||
.@{table-prefix-cls}-cell-fix-right-first::after {
|
||||
border-right: @table-border;
|
||||
}
|
||||
> .@{table-prefix-cls}-content,
|
||||
> .@{table-prefix-cls}-header,
|
||||
> .@{table-prefix-cls}-body {
|
||||
> table {
|
||||
// ============================= Cell =============================
|
||||
> thead > tr > th,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > th,
|
||||
> tfoot > tr > td {
|
||||
border-right: @table-border;
|
||||
}
|
||||
// ============================ Header ============================
|
||||
> thead {
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Header ============================
|
||||
table > {
|
||||
thead {
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// Fixed right should provides additional border
|
||||
> thead > tr,
|
||||
> tbody > tr,
|
||||
> tfoot > tr {
|
||||
> .@{table-prefix-cls}-cell-fix-right-first::after {
|
||||
border-right: @table-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Expandable ==========================
|
||||
> table > tbody > tr > td {
|
||||
> .@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical (-@table-padding-horizontal - @border-width-base);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: @border-width-base;
|
||||
bottom: 0;
|
||||
border-right: @table-border;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================== Content ============================
|
||||
.@{table-prefix-cls}-container {
|
||||
border: @table-border;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// ========================== Expandable ==========================
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical (-@table-padding-horizontal - @border-width-base);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: @border-width-base;
|
||||
bottom: 0;
|
||||
border-right: @table-border;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.@{table-prefix-cls}-scroll-horizontal {
|
||||
tr.@{table-prefix-cls}-expanded-row,
|
||||
tr.@{table-prefix-cls}-placeholder {
|
||||
> td {
|
||||
border-right: 0;
|
||||
> .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
|
||||
> table > tbody {
|
||||
> tr.@{table-prefix-cls}-expanded-row,
|
||||
> tr.@{table-prefix-cls}-placeholder {
|
||||
> td {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Size related
|
||||
&.@{table-prefix-cls}-middle {
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical-md (-@table-padding-horizontal-md - @border-width-base);
|
||||
> .@{table-prefix-cls}-container {
|
||||
> .@{table-prefix-cls}-content,
|
||||
> .@{table-prefix-cls}-body {
|
||||
> table > tbody > tr > td {
|
||||
> .@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical-md (-@table-padding-horizontal-md - @border-width-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{table-prefix-cls}-small {
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical-sm (-@table-padding-horizontal-sm - @border-width-base);
|
||||
> .@{table-prefix-cls}-container {
|
||||
> .@{table-prefix-cls}-content,
|
||||
> .@{table-prefix-cls}-body {
|
||||
> table > tbody > tr > td {
|
||||
> .@{table-prefix-cls}-expanded-row-fixed {
|
||||
margin: -@table-padding-vertical-sm (-@table-padding-horizontal-sm - @border-width-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ Footer ============================
|
||||
.@{table-prefix-cls}-footer {
|
||||
> .@{table-prefix-cls}-footer {
|
||||
border: @table-border;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell {
|
||||
// ============================ Nested ============================
|
||||
.@{table-prefix-cls}-container:first-child {
|
||||
// :first-child to avoid the case when bordered and title is set
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user