1 | @tablePrefixCls: rc-table;
|
2 | @text-color : #666;
|
3 | @font-size-base : 12px;
|
4 | @line-height: 1.5;
|
5 | @table-border-color: #e9e9e9;
|
6 | @table-head-background-color: #f7f7f7;
|
7 | @vertical-padding: 16px;
|
8 | @horizontal-padding: 8px;
|
9 |
|
10 | .@{tablePrefixCls} {
|
11 | font-size: @font-size-base;
|
12 | color: @text-color;
|
13 | transition: opacity 0.3s ease;
|
14 | position: relative;
|
15 | line-height: @line-height;
|
16 | overflow: hidden;
|
17 |
|
18 | .@{tablePrefixCls}-scroll {
|
19 | overflow: auto;
|
20 | table {
|
21 | width: auto;
|
22 | min-width: 100%;
|
23 | }
|
24 | }
|
25 |
|
26 | .@{tablePrefixCls}-header {
|
27 | overflow: hidden;
|
28 | background: @table-head-background-color;
|
29 | }
|
30 |
|
31 | &-fixed-header &-body {
|
32 | background: #fff;
|
33 | position: relative;
|
34 | }
|
35 |
|
36 | &-fixed-header &-body-inner {
|
37 | height: 100%;
|
38 | overflow: scroll;
|
39 | }
|
40 |
|
41 | &-fixed-header &-scroll &-header {
|
42 | overflow-x: scroll;
|
43 | padding-bottom: 20px;
|
44 | margin-bottom: -20px;
|
45 | overflow-y: scroll;
|
46 | box-sizing: border-box;
|
47 | }
|
48 |
|
49 |
|
50 | &-fixed-columns-in-body {
|
51 | visibility: hidden;
|
52 | pointer-events: none;
|
53 | }
|
54 |
|
55 | .@{tablePrefixCls}-title {
|
56 | padding: @vertical-padding @horizontal-padding;
|
57 | border-top: 1px solid @table-border-color;
|
58 | }
|
59 |
|
60 | .@{tablePrefixCls}-content {
|
61 | position: relative;
|
62 | }
|
63 |
|
64 | .@{tablePrefixCls}-footer {
|
65 | padding: @vertical-padding @horizontal-padding;
|
66 | border-bottom: 1px solid @table-border-color;
|
67 | }
|
68 |
|
69 | .@{tablePrefixCls}-placeholder {
|
70 | padding: 16px 8px;
|
71 | background: #fff;
|
72 | border-bottom: 1px solid @table-border-color;
|
73 | text-align: center;
|
74 | position: relative;
|
75 | &-fixed-columns {
|
76 | position: absolute;
|
77 | bottom: 0;
|
78 | width: 100%;
|
79 | background: transparent;
|
80 | pointer-events: none;
|
81 | }
|
82 | }
|
83 |
|
84 | table {
|
85 | width: 100%;
|
86 | border-collapse: separate;
|
87 | text-align: left;
|
88 | }
|
89 |
|
90 | th {
|
91 | background: @table-head-background-color;
|
92 | font-weight: bold;
|
93 | transition: background 0.3s ease;
|
94 | }
|
95 |
|
96 | td {
|
97 | border-bottom: 1px solid @table-border-color;
|
98 | &:empty:after {
|
99 | content: '.';
|
100 | visibility: hidden;
|
101 | }
|
102 | }
|
103 |
|
104 | tr {
|
105 | transition: all 0.3s ease;
|
106 | &:hover {
|
107 | background: #eaf8fe;
|
108 | }
|
109 | &.@{tablePrefixCls}-row-hover {
|
110 | background: #eaf8fe;
|
111 | }
|
112 | }
|
113 |
|
114 | th,
|
115 | td {
|
116 | padding: @vertical-padding @horizontal-padding;
|
117 | white-space: nowrap;
|
118 | }
|
119 | }
|
120 |
|
121 | .@{tablePrefixCls} {
|
122 | &-expand-icon-col {
|
123 | width: 34px;
|
124 | }
|
125 | &-row,
|
126 | &-expanded-row {
|
127 | &-expand-icon {
|
128 | cursor: pointer;
|
129 | display: inline-block;
|
130 | width: 16px;
|
131 | height: 16px;
|
132 | text-align: center;
|
133 | line-height: 16px;
|
134 | border: 1px solid @table-border-color;
|
135 | user-select: none;
|
136 | background: #fff;
|
137 | }
|
138 | &-spaced {
|
139 | visibility: hidden;
|
140 | }
|
141 | &-spaced:after {
|
142 | content: '.';
|
143 | }
|
144 |
|
145 | &-expanded:after {
|
146 | content: '-';
|
147 | }
|
148 |
|
149 | &-collapsed:after {
|
150 | content: '+';
|
151 | }
|
152 | }
|
153 | tr&-expanded-row {
|
154 | background: #f7f7f7;
|
155 | &:hover {
|
156 | background: #f7f7f7;
|
157 | }
|
158 | }
|
159 | &-column-hidden {
|
160 | display: none;
|
161 | }
|
162 | &-prev-columns-page,
|
163 | &-next-columns-page {
|
164 | cursor: pointer;
|
165 | color: #666;
|
166 | z-index: 1;
|
167 | &:hover {
|
168 | color: #2db7f5;
|
169 | }
|
170 | &-disabled {
|
171 | cursor: not-allowed;
|
172 | color: #999;
|
173 | &:hover {
|
174 | color: #999;
|
175 | }
|
176 | }
|
177 | }
|
178 | &-prev-columns-page {
|
179 | margin-right: 8px;
|
180 | &:before {
|
181 | content: '<';
|
182 | }
|
183 | }
|
184 | &-next-columns-page {
|
185 | float: right;
|
186 | &:before {
|
187 | content: '>';
|
188 | }
|
189 | }
|
190 |
|
191 | &-fixed-left,
|
192 | &-fixed-right {
|
193 | position: absolute;
|
194 | top: 0;
|
195 | overflow: hidden;
|
196 | table {
|
197 | width: auto;
|
198 | background: #fff;
|
199 | }
|
200 | }
|
201 |
|
202 | &-fixed-left {
|
203 | left: 0;
|
204 | box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
|
205 | & .@{tablePrefixCls}-body-inner {
|
206 | margin-right: -20px;
|
207 | padding-right: 20px;
|
208 | }
|
209 | .@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner {
|
210 | padding-right: 0;
|
211 | }
|
212 | }
|
213 |
|
214 | &-fixed-right {
|
215 | right: 0;
|
216 | box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
|
217 |
|
218 |
|
219 |
|
220 | .@{tablePrefixCls}-expanded-row {
|
221 | color: transparent;
|
222 | pointer-events: none;
|
223 | }
|
224 | }
|
225 |
|
226 | &&-scroll-position-left &-fixed-left {
|
227 | box-shadow: none;
|
228 | }
|
229 |
|
230 | &&-scroll-position-right &-fixed-right {
|
231 | box-shadow: none;
|
232 | }
|
233 | }
|