rwd-table.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /*!
  2. * Responsive Tables v5.2.6 (http://gergeo.se/RWD-Table-Patterns)
  3. * This is an awesome solution for responsive tables with complex data.
  4. * Authors: Nadan Gergeo <nadan@blimp.se> (www.blimp.se), Lucas Wiener <lucas@blimp.se> & "Maggie Wachs (www.filamentgroup.com)"
  5. * Licensed under MIT (https://github.com/nadangergeo/RWD-Table-Patterns/blob/master/LICENSE-MIT)
  6. */
  7. .dropdown-menu > li.checkbox-row {
  8. padding: 5px 20px;
  9. }
  10. .dropdown-menu li.checkbox-row {
  11. display: block;
  12. clear: both;
  13. font-weight: normal;
  14. line-height: 20px;
  15. color: #333333;
  16. white-space: nowrap;
  17. }
  18. .dropdown-menu li.checkbox-row label {
  19. font-weight: normal;
  20. }
  21. .dropdown-menu li.checkbox-row:hover,
  22. .dropdown-menu li.checkbox-row input:hover,
  23. .dropdown-menu li.checkbox-row label:hover {
  24. cursor: pointer;
  25. }
  26. .no-touch .dropdown-menu > .checkbox-row:hover,
  27. .no-touch .dropdown-menu > .checkbox-row:active {
  28. text-decoration: none;
  29. color: #262626;
  30. background-color: #f5f5f5;
  31. }
  32. .btn-toolbar {
  33. margin-bottom: 20px;
  34. }
  35. .lt-ie8 .btn-toolbar {
  36. display: none;
  37. }
  38. .table-responsive {
  39. border-radius: 3px;
  40. border: 1px solid #dddddd;
  41. margin-bottom: 20px;
  42. }
  43. .table-responsive > .table {
  44. margin-bottom: 0;
  45. }
  46. .table-responsive > .table-bordered {
  47. border: 0;
  48. }
  49. .table-responsive > .table-bordered > thead > tr > th:first-child,
  50. .table-responsive > .table-bordered > tbody > tr > th:first-child,
  51. .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  52. .table-responsive > .table-bordered > thead > tr > td:first-child,
  53. .table-responsive > .table-bordered > tbody > tr > td:first-child,
  54. .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  55. border-left: 0;
  56. }
  57. .table-responsive > .table-bordered > thead > tr > th:last-child,
  58. .table-responsive > .table-bordered > tbody > tr > th:last-child,
  59. .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  60. .table-responsive > .table-bordered > thead > tr > td:last-child,
  61. .table-responsive > .table-bordered > tbody > tr > td:last-child,
  62. .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  63. border-right: 0;
  64. }
  65. .table-responsive > .table-bordered > tbody > tr:last-child > th,
  66. .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  67. .table-responsive > .table-bordered > tbody > tr:last-child > td,
  68. .table-responsive > .table-bordered > tfoot > tr:last-child > td {
  69. border-bottom: 0;
  70. }
  71. .table-responsive[data-pattern="priority-columns"] {
  72. width: 100%;
  73. margin-bottom: 20px;
  74. overflow-y: hidden;
  75. overflow-x: auto;
  76. -ms-overflow-style: -ms-autohiding-scrollbar;
  77. border-radius: 3px;
  78. border: 1px solid #dddddd;
  79. -webkit-overflow-scrolling: touch;
  80. }
  81. .table-responsive[data-pattern="priority-columns"] > .table {
  82. margin-bottom: 0;
  83. }
  84. .table-responsive[data-pattern="priority-columns"] > .table > thead > tr > th,
  85. .table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > th,
  86. .table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > th,
  87. .table-responsive[data-pattern="priority-columns"] > .table > thead > tr > td,
  88. .table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > td,
  89. .table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > td {
  90. white-space: nowrap;
  91. }
  92. .table-responsive[data-pattern="priority-columns"] > .table-bordered {
  93. border: 0;
  94. }
  95. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > th:first-child,
  96. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > th:first-child,
  97. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > th:first-child,
  98. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > td:first-child,
  99. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > td:first-child,
  100. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > td:first-child {
  101. border-left: 0;
  102. }
  103. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > th:last-child,
  104. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > th:last-child,
  105. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > th:last-child,
  106. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > td:last-child,
  107. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > td:last-child,
  108. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > td:last-child {
  109. border-right: 0;
  110. }
  111. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr:last-child > th,
  112. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr:last-child > th,
  113. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr:last-child > td,
  114. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr:last-child > td {
  115. border-bottom: 0;
  116. }
  117. .table-responsive.absolute-solution {
  118. position: relative;
  119. }
  120. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="-1"],
  121. .mq.js.lt-ie10 .sticky-table-header th[data-priority="-1"],
  122. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="-1"],
  123. .mq.js.lt-ie10 .sticky-table-header td[data-priority="-1"],
  124. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="0"],
  125. .mq.js.lt-ie10 .sticky-table-header th[data-priority="0"],
  126. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="0"],
  127. .mq.js.lt-ie10 .sticky-table-header td[data-priority="0"],
  128. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  129. .mq.js.lt-ie10 .sticky-table-header td[data-priority="1"],
  130. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  131. .mq.js.lt-ie10 .sticky-table-header td[data-priority="1"],
  132. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="2"],
  133. .mq.js.lt-ie10 .sticky-table-header th[data-priority="2"],
  134. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="2"],
  135. .mq.js.lt-ie10 .sticky-table-header td[data-priority="2"],
  136. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="3"],
  137. .mq.js.lt-ie10 .sticky-table-header th[data-priority="3"],
  138. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="3"],
  139. .mq.js.lt-ie10 .sticky-table-header td[data-priority="3"],
  140. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="4"],
  141. .mq.js.lt-ie10 .sticky-table-header th[data-priority="4"],
  142. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="4"],
  143. .mq.js.lt-ie10 .sticky-table-header td[data-priority="4"],
  144. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="5"],
  145. .mq.js.lt-ie10 .sticky-table-header th[data-priority="5"],
  146. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="5"],
  147. .mq.js.lt-ie10 .sticky-table-header td[data-priority="5"],
  148. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="6"],
  149. .mq.js.lt-ie10 .sticky-table-header th[data-priority="6"],
  150. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="6"],
  151. .mq.js.lt-ie10 .sticky-table-header td[data-priority="6"] {
  152. display: none;
  153. }
  154. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="1"],
  155. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="1"],
  156. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  157. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="1"] {
  158. display: inline;
  159. }
  160. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="1"],
  161. .mq.js.lt-ie10 .sticky-table-header th[data-priority="1"],
  162. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  163. .mq.js.lt-ie10 .sticky-table-header td[data-priority="1"] {
  164. display: table-cell;
  165. }
  166. @media screen and (min-width: 480px) {
  167. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="2"],
  168. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="2"],
  169. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="2"],
  170. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="2"] {
  171. display: inline;
  172. }
  173. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="2"],
  174. .mq.js.lt-ie10 .sticky-table-header th[data-priority="2"],
  175. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="2"],
  176. .mq.js.lt-ie10 .sticky-table-header td[data-priority="2"] {
  177. display: table-cell;
  178. }
  179. }
  180. @media screen and (min-width: 640px) {
  181. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="3"],
  182. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="3"],
  183. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="3"],
  184. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="3"] {
  185. display: inline;
  186. }
  187. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="3"],
  188. .mq.js.lt-ie10 .sticky-table-header th[data-priority="3"],
  189. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="3"],
  190. .mq.js.lt-ie10 .sticky-table-header td[data-priority="3"] {
  191. display: table-cell;
  192. }
  193. }
  194. @media screen and (min-width: 800px) {
  195. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="4"],
  196. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="4"],
  197. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="4"],
  198. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="4"] {
  199. display: inline;
  200. }
  201. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="4"],
  202. .mq.js.lt-ie10 .sticky-table-header th[data-priority="4"],
  203. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="4"],
  204. .mq.js.lt-ie10 .sticky-table-header td[data-priority="4"] {
  205. display: table-cell;
  206. }
  207. }
  208. @media screen and (min-width: 960px) {
  209. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="5"],
  210. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="5"],
  211. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="5"],
  212. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="5"] {
  213. display: inline;
  214. }
  215. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="5"],
  216. .mq.js.lt-ie10 .sticky-table-header th[data-priority="5"],
  217. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="5"],
  218. .mq.js.lt-ie10 .sticky-table-header td[data-priority="5"] {
  219. display: table-cell;
  220. }
  221. }
  222. @media screen and (min-width: 1120px) {
  223. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="6"],
  224. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="6"],
  225. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="6"],
  226. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="6"] {
  227. display: inline;
  228. }
  229. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="6"],
  230. .mq.js.lt-ie10 .sticky-table-header th[data-priority="6"],
  231. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="6"],
  232. .mq.js.lt-ie10 .sticky-table-header td[data-priority="6"] {
  233. display: table-cell;
  234. }
  235. }
  236. .mq.js .table-responsive[data-pattern="priority-columns"] th.cell-hide,
  237. .mq.js.lt-ie10 .sticky-table-header th.cell-hide,
  238. .mq.js .table-responsive[data-pattern="priority-columns"] td.cell-hide,
  239. .mq.js.lt-ie10 .sticky-table-header td.cell-hide {
  240. display: none;
  241. }
  242. .mq.js .table-responsive[data-pattern="priority-columns"] th.cell-show,
  243. .mq.js.lt-ie10 .sticky-table-header th.cell-show,
  244. .mq.js .table-responsive[data-pattern="priority-columns"] td.cell-show,
  245. .mq.js.lt-ie10 .sticky-table-header td.cell-show {
  246. display: table-cell;
  247. }
  248. .lt-ie9 .mq.js .table-responsive[data-pattern="priority-columns"] th.cell-show,
  249. .lt-ie9 .mq.js.lt-ie10 .sticky-table-header th.cell-show,
  250. .lt-ie9 .mq.js .table-responsive[data-pattern="priority-columns"] td.cell-show,
  251. .lt-ie9 .mq.js.lt-ie10 .sticky-table-header td.cell-show {
  252. display: inline;
  253. }
  254. .lt-ie9 .mq.js .table-responsive[data-pattern="priority-columns"].display-all th,
  255. .lt-ie9 .mq.js.lt-ie10 .sticky-table-header.display-all th,
  256. .lt-ie9 .mq.js .table-responsive[data-pattern="priority-columns"].display-all td,
  257. .lt-ie9 .mq.js.lt-ie10 .sticky-table-header.display-all td {
  258. display: inline !important;
  259. }
  260. .mq.js .table-responsive[data-pattern="priority-columns"] table.display-all th,
  261. .mq.js.lt-ie10 .sticky-table-header table.display-all th,
  262. .mq.js .table-responsive[data-pattern="priority-columns"] table.display-all td,
  263. .mq.js.lt-ie10 .sticky-table-header table.display-all td {
  264. display: table-cell !important;
  265. }
  266. table.table-small-font {
  267. font-size: 12px;
  268. -webkit-text-size-adjust: none;
  269. line-height: 1.5em;
  270. }
  271. table.focus-on tbody tr:hover,
  272. table.focus-on tfoot tr:hover {
  273. cursor: pointer;
  274. }
  275. table.focus-on tbody tr.unfocused th,
  276. table.focus-on tfoot tr.unfocused th,
  277. table.focus-on tbody tr.unfocused td,
  278. table.focus-on tfoot tr.unfocused td {
  279. color: #777777;
  280. color: rgba(0, 0, 0, 0.4);
  281. }
  282. table.focus-on tbody tr.focused th,
  283. table.focus-on tfoot tr.focused th,
  284. table.focus-on tbody tr.focused td,
  285. table.focus-on tfoot tr.focused td {
  286. background-color: #5bc0de;
  287. color: #000;
  288. }
  289. .sticky-table-header {
  290. background-color: #fff;
  291. border: none;
  292. border-radius: 0;
  293. border-top: 1px solid #dddddd;
  294. border-bottom: 1px solid #dddddd;
  295. visibility: hidden;
  296. z-index: 990;
  297. overflow: hidden;
  298. }
  299. .fixed-solution .sticky-table-header {
  300. position: fixed;
  301. min-width: 0;
  302. }
  303. .absolute-solution .sticky-table-header {
  304. position: absolute;
  305. min-width: 100%;
  306. top: 0;
  307. }
  308. .sticky-table-header.border-radius-fix {
  309. border-bottom-left-radius: 3px;
  310. border-bottom-right-radius: 3px;
  311. }
  312. .sticky-table-header > .table {
  313. margin-bottom: 0;
  314. }
  315. .sticky-table-header > .table > thead > tr > th,
  316. .sticky-table-header > .table > tbody > tr > th,
  317. .sticky-table-header > .table > tfoot > tr > th,
  318. .sticky-table-header > .table > thead > tr > td,
  319. .sticky-table-header > .table > tbody > tr > td,
  320. .sticky-table-header > .table > tfoot > tr > td {
  321. white-space: nowrap;
  322. }
  323. .sticky-table-header > .table-bordered {
  324. border: 0;
  325. }
  326. .sticky-table-header > .table-bordered > thead > tr > th:first-child,
  327. .sticky-table-header > .table-bordered > tbody > tr > th:first-child,
  328. .sticky-table-header > .table-bordered > tfoot > tr > th:first-child,
  329. .sticky-table-header > .table-bordered > thead > tr > td:first-child,
  330. .sticky-table-header > .table-bordered > tbody > tr > td:first-child,
  331. .sticky-table-header > .table-bordered > tfoot > tr > td:first-child {
  332. border-left: 0;
  333. }
  334. .sticky-table-header > .table-bordered > thead > tr > th:last-child,
  335. .sticky-table-header > .table-bordered > tbody > tr > th:last-child,
  336. .sticky-table-header > .table-bordered > tfoot > tr > th:last-child,
  337. .sticky-table-header > .table-bordered > thead > tr > td:last-child,
  338. .sticky-table-header > .table-bordered > tbody > tr > td:last-child,
  339. .sticky-table-header > .table-bordered > tfoot > tr > td:last-child {
  340. border-right: 0;
  341. }
  342. .sticky-table-header > .table-bordered > tbody > tr:last-child > th,
  343. .sticky-table-header > .table-bordered > tfoot > tr:last-child > th,
  344. .sticky-table-header > .table-bordered > tbody > tr:last-child > td,
  345. .sticky-table-header > .table-bordered > tfoot > tr:last-child > td {
  346. border-bottom: 0;
  347. }