index.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. .rc-table-tbody-virtual {
  2. border-left: 1px solid red;
  3. }
  4. .rc-table-tbody-virtual * {
  5. box-sizing: border-box;
  6. }
  7. .rc-table-tbody-virtual .rc-table-row {
  8. display: flex;
  9. box-sizing: border-box;
  10. width: 100%;
  11. }
  12. .rc-table-tbody-virtual .rc-table-row-extra .rc-table-cell {
  13. background: rgba(200, 200, 255) !important;
  14. }
  15. .rc-table-tbody-virtual .rc-table-cell {
  16. flex: 0 0 var(--virtual-width);
  17. width: var(--virtual-width);
  18. padding: 8px 16px;
  19. border-right: 1px solid red;
  20. border-bottom: 1px solid red;
  21. }
  22. .rc-table {
  23. position: relative;
  24. box-sizing: border-box;
  25. color: #666;
  26. font-size: 12px;
  27. line-height: 1.5;
  28. }
  29. .rc-table-rtl {
  30. direction: rtl;
  31. }
  32. .rc-table table {
  33. width: 100%;
  34. border-spacing: 0px;
  35. }
  36. .rc-table th,
  37. .rc-table td {
  38. position: relative;
  39. box-sizing: border-box;
  40. padding: 0;
  41. padding: 16px 8px;
  42. white-space: normal;
  43. border: 1px solid red;
  44. border-top: 0;
  45. border-left: 0;
  46. transition: box-shadow 0.3s;
  47. }
  48. .rc-table-rtl.rc-table th,
  49. .rc-table-rtl.rc-table td {
  50. border-right: 0;
  51. border-left: 1px solid red;
  52. }
  53. .rc-table-fixed-column-gapped .rc-table-cell-fix-left-last::after,
  54. .rc-table-fixed-column-gapped .rc-table-cell-fix-right-first::after {
  55. display: none !important;
  56. }
  57. .rc-table-cell {
  58. background: #f4f4f4;
  59. }
  60. .rc-table-cell-fix-left,
  61. .rc-table-cell-fix-right {
  62. z-index: 2;
  63. }
  64. .rc-table-cell-fix-right:last-child:not(.rc-table-cell-fix-sticky) {
  65. border-right-color: transparent;
  66. }
  67. .rc-table-rtl .rc-table-cell-fix-right:last-child {
  68. border-right-color: red;
  69. }
  70. .rc-table-rtl .rc-table-cell-fix-left:last-child {
  71. border-left-color: transparent;
  72. }
  73. .rc-table-rtl .rc-table-cell-fix-left-first {
  74. box-shadow: 1px 0 0 red;
  75. }
  76. .rc-table-cell-fix-left-first::after,
  77. .rc-table-cell-fix-left-last::after {
  78. position: absolute;
  79. top: 0;
  80. right: -1px;
  81. bottom: -1px;
  82. width: 20px;
  83. transform: translateX(100%);
  84. transition: box-shadow 0.3s;
  85. content: '';
  86. pointer-events: none;
  87. }
  88. .rc-table-cell-fix-left-all::after {
  89. display: none;
  90. }
  91. .rc-table-cell-fix-right-first,
  92. .rc-table-cell-fix-right-last {
  93. box-shadow: -1px 0 0 red;
  94. }
  95. .rc-table-rtl .rc-table-cell-fix-right-first,
  96. .rc-table-rtl .rc-table-cell-fix-right-last {
  97. box-shadow: none;
  98. }
  99. .rc-table-cell-fix-right-first::after,
  100. .rc-table-cell-fix-right-last::after {
  101. position: absolute;
  102. top: 0;
  103. bottom: -1px;
  104. left: -1px;
  105. width: 20px;
  106. transform: translateX(-100%);
  107. transition: box-shadow 0.3s;
  108. content: '';
  109. pointer-events: none;
  110. }
  111. .rc-table-cell.rc-table-cell-ellipsis {
  112. overflow: hidden;
  113. white-space: nowrap;
  114. text-overflow: ellipsis;
  115. }
  116. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-left-first,
  117. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-left-last,
  118. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-right-first .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-right-last {
  119. overflow: visible;
  120. }
  121. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-left-first .rc-table-cell-content,
  122. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-left-last .rc-table-cell-content,
  123. .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-right-first .rc-table-cell.rc-table-cell-ellipsis.rc-table-cell-fix-right-last .rc-table-cell-content {
  124. display: block;
  125. overflow: hidden;
  126. text-overflow: ellipsis;
  127. }
  128. .rc-table-cell.rc-table-cell-row-hover {
  129. background: #fff4f4;
  130. }
  131. .rc-table-ping-left .rc-table-cell-fix-left-first::after,
  132. .rc-table-ping-left .rc-table-cell-fix-left-last::after {
  133. box-shadow: inset 10px 0 8px -8px green;
  134. }
  135. .rc-table-ping-right .rc-table-cell-fix-right-first::after,
  136. .rc-table-ping-right .rc-table-cell-fix-right-last::after {
  137. box-shadow: inset -10px 0 8px -8px green;
  138. }
  139. .rc-table-expand-icon-col {
  140. width: 60px;
  141. }
  142. .rc-table-row-expand-icon-cell {
  143. text-align: center;
  144. }
  145. .rc-table thead th {
  146. text-align: center;
  147. background: #f7f7f7;
  148. }
  149. .rc-table thead .rc-table-cell-scrollbar::after {
  150. position: absolute;
  151. top: 0;
  152. bottom: 0;
  153. left: -1px;
  154. width: 1px;
  155. background: #f7f7f7;
  156. content: '';
  157. }
  158. .rc-table-rtl.rc-table thead .rc-table-cell-scrollbar::after {
  159. right: -1px;
  160. left: auto;
  161. }
  162. .rc-table-header {
  163. border: 1px solid red;
  164. border-right: 0;
  165. border-bottom: 0;
  166. }
  167. .rc-table-placeholder {
  168. text-align: center;
  169. }
  170. .rc-table tbody tr td {
  171. background: #fff;
  172. }
  173. .rc-table tbody tr th {
  174. background: #f7f7f7;
  175. }
  176. .rc-table-content {
  177. border: 1px solid red;
  178. border-right: 0;
  179. border-bottom: 0;
  180. border-radius: 5px 0 0 0;
  181. }
  182. .rc-table-body {
  183. border: 1px solid red;
  184. border-right: 0;
  185. border-bottom: 0;
  186. border-top: 0;
  187. }
  188. .rc-table-fixed-column .rc-table-body::after {
  189. position: absolute;
  190. top: 0;
  191. right: 0;
  192. bottom: 0;
  193. z-index: 1;
  194. border-right: 1px solid red;
  195. content: '';
  196. }
  197. .rc-table-expanded-row .rc-table-cell {
  198. box-shadow: inset 0 8px 8px -8px green;
  199. }
  200. .rc-table-expanded-row-fixed {
  201. box-sizing: border-box;
  202. margin: -16px -8px;
  203. margin-right: -10px;
  204. padding: 16px 8px;
  205. }
  206. .rc-table-expanded-row-fixed::after {
  207. position: absolute;
  208. top: 0;
  209. right: 1px;
  210. bottom: 0;
  211. width: 0;
  212. border-right: 1px solid red;
  213. content: '';
  214. }
  215. .rc-table-row-expand-icon {
  216. display: inline-block;
  217. width: 16px;
  218. height: 16px;
  219. color: #aaa;
  220. line-height: 16px;
  221. text-align: center;
  222. vertical-align: middle;
  223. border: 1px solid currentColor;
  224. cursor: pointer;
  225. }
  226. .rc-table-row-expand-icon.rc-table-row-expanded::after {
  227. content: '-';
  228. }
  229. .rc-table-row-expand-icon.rc-table-row-collapsed::after {
  230. content: '+';
  231. }
  232. .rc-table-row-expand-icon.rc-table-row-spaced {
  233. visibility: hidden;
  234. }
  235. .rc-table-title {
  236. padding: 16px 8px;
  237. border: 1px solid red;
  238. border-bottom: 0;
  239. }
  240. .rc-table-caption {
  241. padding: 16px 8px;
  242. border-right: 1px solid red;
  243. border-bottom: 1px solid red;
  244. }
  245. .rc-table-footer {
  246. padding: 16px 8px;
  247. border: 1px solid red;
  248. border-top: 0;
  249. }
  250. .rc-table tfoot td {
  251. background: #fff;
  252. }
  253. .rc-table-summary {
  254. border-top: 1px solid red;
  255. border-left: 1px solid red;
  256. }
  257. .rc-table-sticky-holder {
  258. position: sticky;
  259. z-index: 2;
  260. }
  261. .rc-table-sticky-scroll {
  262. position: sticky;
  263. bottom: 0;
  264. z-index: 2;
  265. display: flex;
  266. align-items: center;
  267. border-top: 1px solid #f3f3f3;
  268. opacity: 0.6;
  269. transition: transform 0.1s ease-in 0s;
  270. }
  271. .rc-table-sticky-scroll:hover {
  272. transform: scaleY(1.2);
  273. transform-origin: center bottom;
  274. }
  275. .rc-table-sticky-scroll-bar {
  276. height: 8px;
  277. background-color: #bbb;
  278. border-radius: 4px;
  279. }
  280. .rc-table-sticky-scroll-bar:hover {
  281. background-color: #999;
  282. }
  283. .rc-table-sticky-scroll-bar-active {
  284. background-color: #999;
  285. }