rwd-table.css 15 KB

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