Skip to content

Commit 254f759

Browse files
dwqsdwqs
committed
refactor: Update table styles
1 parent a034de5 commit 254f759

File tree

3 files changed

+65
-64
lines changed

3 files changed

+65
-64
lines changed

‎src/style/fixed.less

+30-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,46 @@
11
@import './var.less';
22

3+
34
.v2-table-fixed {
5+
position: absolute;
6+
top: 0;
7+
overflow: hidden;
48
background: @background-color-white;
59
box-shadow: 0 0 10px rgba(0,0,0,.12);
6-
}
7-
8-
.v2-table-fixed__header-wrapper, .v2-table-fixed__body-wrapper, .v2-table-fixed__footer-wrapper {
9-
width: 100%;
10-
overflow: hidden;
10+
&.v2-table__fixed-left {
11+
z-index: @z-index-min;
12+
left: 0;
13+
}
14+
&.v2-table__fixed-right {
15+
z-index: @z-index-mid;
16+
right: 0;
17+
}
1118
}
1219

1320
.v2-table-fixed__left-empty-border {
1421
border-left: 1px solid @border-primary-color;
1522
border-bottom: 1px solid @border-primary-color;
23+
.v2-table__header.v2-table__border .v2-table__cell:first-child {
24+
border-left: none;
25+
}
1626
}
1727

1828
.v2-table-fixed__right-empty-border {
1929
border-right: 1px solid @border-primary-color;
2030
border-bottom: 1px solid @border-primary-color;
31+
.v2-table__header.v2-table__border .v2-table__cell:first-child {
32+
border-left: none;
33+
}
34+
.v2-table__header.v2-table__border .v2-table__cell:last-child {
35+
border-right: none;
36+
}
37+
}
38+
39+
.v2-table-fixed__right-with-border {
40+
.v2-table__body.v2-table__border .v2-table__cell:first-child {
41+
border-left: none;
42+
}
43+
.v2-table__header.v2-table__border .v2-table__cell:first-child {
44+
border-left: none;
45+
}
2146
}

‎src/style/index.less

+33-58
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,33 @@
55
.v2-table {
66
position: relative;
77
width: 100%;
8+
height: 100%;
89
overflow: hidden;
910
box-sizing: border-box;
1011
background-color: @background-color-white;
1112
font-size: @normal-font-size;
1213
font-weight: @font-weight-normal;
1314
color: @color-primary;
14-
*, *::after, *::before {
15+
table, tbody, tr, td, th {
1516
position: relative;
1617
box-sizing: border-box;
1718
margin: 0;
1819
padding: 0;
1920
}
20-
.beautify-scroll__y-thumb,
21-
.beautify-scroll__x-thumb,
22-
.beautify-scroll__x-bar,
23-
.beautify-scroll__y-bar {
24-
position: absolute;
25-
}
26-
.v2-table-fixed {
27-
position: absolute;
28-
z-index: @z-index-min;
29-
top: 0;
30-
bottom: 0;
31-
overflow: hidden;
32-
&.v2-table__fixed-left {
33-
left: 0;
34-
}
35-
&.v2-table__fixed-right {
36-
right: 0;
37-
}
38-
}
3921
}
4022

4123
.v2-table__table-wrapper, .v2-table__table-container {
4224
width: 100%;
25+
height: 100%;
4326
overflow: hidden;
4427
}
4528

46-
.v2-table__header-wrapper, .v2-table__body-wrapper, .v2-table__footer-wrapper {
47-
width: 100%;
48-
overflow: hidden;
29+
.v2-table__header-wrapper {
30+
// overflow: hidden;
31+
}
32+
33+
.v2-table__body-wrapper, .v2-table-fixed__body-wrapper {
34+
// height: 148px;
4935
}
5036

5137
.v2-table__col-group {
@@ -56,9 +42,7 @@
5642
}
5743

5844
.v2-table__body, .v2-table__header, .v2-table__footer {
59-
display: table;
6045
table-layout: fixed;
61-
width: 100%;
6246
&.v2-table__border {
6347
.v2-table__cell {
6448
border-right: 1px solid @border-regular-color;
@@ -70,44 +54,41 @@
7054
&.v2-table__header-border {
7155
border-top: 1px solid @border-primary-color;
7256
}
73-
&.v2-table__body-border {
74-
.v2-table__empty-data {
75-
border-right: 1px solid @border-primary-color;
76-
border-left: 1px solid @border-primary-color;
77-
}
78-
}
7957
&.v2-table__footer-border {
8058

8159
}
8260
}
8361

84-
.v2-table__table-thead {
85-
display: table-header-group;
86-
}
87-
88-
.v2-table__header-row {
89-
display: table-row;
62+
.v2-table__header th {
63+
height: 40px;
9064
}
9165

92-
.v2-table__table-tbody {
93-
display: table-row-group;
66+
.v2-table__footer td, .v2-table__body td {
67+
height: 44px;
68+
.cell {
69+
color: @color-primary;
70+
white-space: normal;
71+
word-wrap: break-word;
72+
word-break: break-all;
73+
line-height: 1.5;
74+
}
9475
}
9576

9677
.v2-table__cell {
9778
border-bottom: 1px solid @border-regular-color;
9879
cursor: default;
99-
font-size: 14px;
100-
padding: 10px 5px;
80+
font-size: @normal-font-size;
10181
user-select: none;
10282
vertical-align: middle;
103-
display: table-cell;
10483
overflow: hidden;
10584
text-align: center;
10685
&.v2-table__column-cell {
107-
color: @color-thead;
86+
// color: @color-thead;
87+
color: @color-regular2;
10888
white-space: nowrap;
10989
overflow: hidden;
11090
text-overflow: ellipsis;
91+
font-weight: 400;
11192
background-color: @background-color-white;
11293
&.sortable {
11394
cursor: pointer;
@@ -119,23 +100,14 @@
119100
border-bottom: 5px solid @background-color-light
120101
}
121102
}
122-
&.v2-table__row-cell {
123-
color: @color-primary;
124-
// white-space: normal;
125-
// word-wrap: break-word;
126-
// word-break: break-all;
127-
/** 简化列的固定，后续提供类似 rowHeight/colHeight 等属性来设置行高 **/
128-
white-space: nowrap;
129-
text-overflow: ellipsis;
130-
}
131103
&.v2-table__footer-cell {
132104
background-color: @background-color-hover;
133105
}
134106
&.text-left {
135-
text-align: left
107+
text-align: left;
136108
}
137109
&.text-right {
138-
text-align: right
110+
text-align: right;
139111
}
140112
}
141113

@@ -171,7 +143,6 @@
171143
background-color: @background-color-white;
172144
transition: @all-transition;
173145
font-size: 0;
174-
display: table-row;
175146
&.row-hover {
176147
background-color: @background-color-hover;
177148
}
@@ -182,12 +153,16 @@
182153

183154
.v2-table__empty-data {
184155
position: relative;
185-
min-height: 175px;
156+
height: 144px;
186157
box-sizing: border-box;
187158
font-size: @normal-font-size;
188159
color: @color-thead;
189160
text-align: center;
190-
border-bottom: 1px solid @border-primary-color;
161+
&.v2-table__empty-border {
162+
border-right: 1px solid @border-primary-color;
163+
border-left: 1px solid @border-primary-color;
164+
border-bottom: 1px solid @border-primary-color;
165+
}
191166
.v2-table__empty-default {
192167
position: absolute;
193168
left: 50%;
@@ -227,7 +202,7 @@
227202
top: 0;
228203
height: 100%;
229204
width: 100%;
230-
z-index: @z-index-min;
205+
z-index: @z-index-normal;
231206
// background-color: transparent;
232207
background: rgba(255,255,255,0.7);
233208
.v2-table__loading-spinner {

‎src/style/var.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@all-transition: all .3s cubic-bezier(.645,.045,.355,1);
33

44
// Fonts
5-
@normal-font-size: 14px;
5+
@normal-font-size: 12px;
66
@font-weight-normal: 400;
77

88
// Colors
@@ -28,6 +28,7 @@
2828

2929
// z-index
3030
@z-index-min: 5;
31+
@z-index-mid: 7;
3132
@z-index-normal: 150;
3233
@z-index-regular: 1500;
3334
@z-index-popper: 15000;

0 commit comments

Comments
 (0)