rwd-table.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /*!
  2. * Responsive Tables v5.0.4 (http://gergeo.se/RWD-Table-Patterns)
  3. * This is an awesome solution for responsive tables with complex data.
  4. * Authors: Nadan Gergeo <nadan.gergeo@gmail.com> (www.gergeo.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. position: relative;
  73. width: 100%;
  74. margin-bottom: 20px;
  75. overflow-y: hidden;
  76. overflow-x: auto;
  77. -ms-overflow-style: -ms-autohiding-scrollbar;
  78. border-radius: 3px;
  79. border: 1px solid #dddddd;
  80. -webkit-overflow-scrolling: touch;
  81. }
  82. .table-responsive[data-pattern="priority-columns"] > .table {
  83. margin-bottom: 0;
  84. }
  85. .table-responsive[data-pattern="priority-columns"] > .table > thead > tr > th,
  86. .table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > th,
  87. .table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > th,
  88. .table-responsive[data-pattern="priority-columns"] > .table > thead > tr > td,
  89. .table-responsive[data-pattern="priority-columns"] > .table > tbody > tr > td,
  90. .table-responsive[data-pattern="priority-columns"] > .table > tfoot > tr > td {
  91. white-space: nowrap;
  92. }
  93. .table-responsive[data-pattern="priority-columns"] > .table-bordered {
  94. border: 0;
  95. }
  96. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > th:first-child,
  97. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > th:first-child,
  98. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > th:first-child,
  99. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > td:first-child,
  100. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > td:first-child,
  101. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > td:first-child {
  102. border-left: 0;
  103. }
  104. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > th:last-child,
  105. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > th:last-child,
  106. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > th:last-child,
  107. .table-responsive[data-pattern="priority-columns"] > .table-bordered > thead > tr > td:last-child,
  108. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr > td:last-child,
  109. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr > td:last-child {
  110. border-right: 0;
  111. }
  112. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr:last-child > th,
  113. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr:last-child > th,
  114. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tbody > tr:last-child > td,
  115. .table-responsive[data-pattern="priority-columns"] > .table-bordered > tfoot > tr:last-child > td {
  116. border-bottom: 0;
  117. }
  118. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority],
  119. .mq.js.lt-ie10 .sticky-table-header th[data-priority],
  120. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority],
  121. .mq.js.lt-ie10 .sticky-table-header td[data-priority] {
  122. display: none;
  123. }
  124. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="1"],
  125. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="1"],
  126. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  127. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="1"] {
  128. display: inline;
  129. }
  130. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="1"],
  131. .mq.js.lt-ie10 .sticky-table-header th[data-priority="1"],
  132. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="1"],
  133. .mq.js.lt-ie10 .sticky-table-header td[data-priority="1"] {
  134. display: table-cell;
  135. }
  136. @media screen and (min-width: 480px) {
  137. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="2"],
  138. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="2"],
  139. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="2"],
  140. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="2"] {
  141. display: inline;
  142. }
  143. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="2"],
  144. .mq.js.lt-ie10 .sticky-table-header th[data-priority="2"],
  145. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="2"],
  146. .mq.js.lt-ie10 .sticky-table-header td[data-priority="2"] {
  147. display: table-cell;
  148. }
  149. }
  150. @media screen and (min-width: 640px) {
  151. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="3"],
  152. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="3"],
  153. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="3"],
  154. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="3"] {
  155. display: inline;
  156. }
  157. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="3"],
  158. .mq.js.lt-ie10 .sticky-table-header th[data-priority="3"],
  159. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="3"],
  160. .mq.js.lt-ie10 .sticky-table-header td[data-priority="3"] {
  161. display: table-cell;
  162. }
  163. }
  164. @media screen and (min-width: 800px) {
  165. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="4"],
  166. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="4"],
  167. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="4"],
  168. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="4"] {
  169. display: inline;
  170. }
  171. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="4"],
  172. .mq.js.lt-ie10 .sticky-table-header th[data-priority="4"],
  173. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="4"],
  174. .mq.js.lt-ie10 .sticky-table-header td[data-priority="4"] {
  175. display: table-cell;
  176. }
  177. }
  178. @media screen and (min-width: 960px) {
  179. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="5"],
  180. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="5"],
  181. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="5"],
  182. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="5"] {
  183. display: inline;
  184. }
  185. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="5"],
  186. .mq.js.lt-ie10 .sticky-table-header th[data-priority="5"],
  187. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="5"],
  188. .mq.js.lt-ie10 .sticky-table-header td[data-priority="5"] {
  189. display: table-cell;
  190. }
  191. }
  192. @media screen and (min-width: 1120px) {
  193. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="6"],
  194. .lt-ie9.mq.js.lt-ie10 .sticky-table-header th[data-priority="6"],
  195. .lt-ie9.mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="6"],
  196. .lt-ie9.mq.js.lt-ie10 .sticky-table-header td[data-priority="6"] {
  197. display: inline;
  198. }
  199. .mq.js .table-responsive[data-pattern="priority-columns"] th[data-priority="6"],
  200. .mq.js.lt-ie10 .sticky-table-header th[data-priority="6"],
  201. .mq.js .table-responsive[data-pattern="priority-columns"] td[data-priority="6"],
  202. .mq.js.lt-ie10 .sticky-table-header td[data-priority="6"] {
  203. display: table-cell;
  204. }
  205. }
  206. table.table-small-font {
  207. font-size: 12px;
  208. -webkit-text-size-adjust: none;
  209. line-height: 1.5em;
  210. }
  211. table.focus-on tbody tr:hover {
  212. cursor: pointer;
  213. }
  214. table.focus-on tbody tr.unfocused th,
  215. table.focus-on tbody tr.unfocused td {
  216. color: #999999;
  217. color: rgba(0, 0, 0, 0.4);
  218. }
  219. table.focus-on tbody tr.focused th,
  220. table.focus-on tbody tr.focused td {
  221. background-color: #5bc0de;
  222. color: #000;
  223. }
  224. table th.col-hide,
  225. table td.col-hide {
  226. display: none;
  227. }
  228. table th.col-show,
  229. table td.col-show {
  230. display: inline;
  231. }
  232. .lt-ie9 table th.col-show,
  233. .lt-ie9 table td.col-show {
  234. display: table-cell;
  235. }
  236. .lt-ie9 table.display-all th,
  237. .lt-ie9 table.display-all td {
  238. display: inline !important;
  239. }
  240. table.display-all th,
  241. table.display-all td {
  242. display: table-cell !important;
  243. }
  244. .sticky-table-header {
  245. background-color: #fff;
  246. border: none;
  247. border-radius: 0;
  248. border-top: 1px solid #dddddd;
  249. border-bottom: 1px solid #dddddd;
  250. position: absolute;
  251. top: 0;
  252. visibility: hidden;
  253. z-index: 990;
  254. overflow: hidden;
  255. min-width: 100%;
  256. }
  257. .sticky-table-header.fixed-solution {
  258. min-width: 0;
  259. position: fixed;
  260. }
  261. .lt-ie10 .sticky-table-header.fixed-solution {
  262. border-left: 1px solid #dddddd;
  263. border-right: 1px solid #dddddd;
  264. box-sizing: content-box;
  265. border-bottom: none;
  266. }
  267. .sticky-table-header.border-radius-fix {
  268. border-bottom-left-radius: 3px;
  269. border-bottom-right-radius: 3px;
  270. }
  271. .sticky-table-header > .table {
  272. margin-bottom: 0;
  273. }
  274. .sticky-table-header > .table > thead > tr > th,
  275. .sticky-table-header > .table > tbody > tr > th,
  276. .sticky-table-header > .table > tfoot > tr > th,
  277. .sticky-table-header > .table > thead > tr > td,
  278. .sticky-table-header > .table > tbody > tr > td,
  279. .sticky-table-header > .table > tfoot > tr > td {
  280. white-space: nowrap;
  281. }
  282. .sticky-table-header > .table-bordered {
  283. border: 0;
  284. }
  285. .sticky-table-header > .table-bordered > thead > tr > th:first-child,
  286. .sticky-table-header > .table-bordered > tbody > tr > th:first-child,
  287. .sticky-table-header > .table-bordered > tfoot > tr > th:first-child,
  288. .sticky-table-header > .table-bordered > thead > tr > td:first-child,
  289. .sticky-table-header > .table-bordered > tbody > tr > td:first-child,
  290. .sticky-table-header > .table-bordered > tfoot > tr > td:first-child {
  291. border-left: 0;
  292. }
  293. .sticky-table-header > .table-bordered > thead > tr > th:last-child,
  294. .sticky-table-header > .table-bordered > tbody > tr > th:last-child,
  295. .sticky-table-header > .table-bordered > tfoot > tr > th:last-child,
  296. .sticky-table-header > .table-bordered > thead > tr > td:last-child,
  297. .sticky-table-header > .table-bordered > tbody > tr > td:last-child,
  298. .sticky-table-header > .table-bordered > tfoot > tr > td:last-child {
  299. border-right: 0;
  300. }
  301. .sticky-table-header > .table-bordered > tbody > tr:last-child > th,
  302. .sticky-table-header > .table-bordered > tfoot > tr:last-child > th,
  303. .sticky-table-header > .table-bordered > tbody > tr:last-child > td,
  304. .sticky-table-header > .table-bordered > tfoot > tr:last-child > td {
  305. border-bottom: 0;
  306. }