UNPKG

4.37 kBtext/lessView Raw
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 // https://github.com/ant-design/ant-design/issues/10828
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: '.'; // empty cell placeholder
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 // hide expand row content in right fixed Table
219 // https://github.com/ant-design/ant-design/issues/1898
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}