datatables_style.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. /*
  2. * 表格样式
  3. */
  4. body {
  5. background: #fff;
  6. -webkit-font-smoothing: antialiased;
  7. overflow-x: hidden;
  8. background: url(img/5.png) repeat;
  9. font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  10. Helvetica, Arial, sans-serif;
  11. color:#353535;
  12. font-size: 13px;
  13. -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  14. -webkit-text-size-adjust: 100%;
  15. font-size-adjust: 100%;
  16. font-weight: 400;
  17. /*-webkit-text-stroke: 100%;*/
  18. }
  19. .dataTables_wrapper {
  20. position: relative;
  21. clear: both;
  22. zoom: 1; /* Feeling sorry for IE */
  23. }
  24. .box .dataTables_wrapper {
  25. padding-top: 5px;
  26. }
  27. /*列表长度下拉框宽度*/
  28. div.dataTables_length select {
  29. width: 60px;
  30. }
  31. .dataTables_processing {
  32. position: absolute;
  33. top: 50%;
  34. left: 50%;
  35. width: 250px;
  36. height: 30px;
  37. margin-left: -125px;
  38. margin-top: -15px;
  39. padding: 14px 0 2px 0;
  40. border: 1px solid #ddd;
  41. text-align: center;
  42. color: #999;
  43. font-size: 14px;
  44. background-color: white;
  45. }
  46. .dataTables_length {
  47. width: auto;
  48. float: right;
  49. }
  50. .dataTables_length .selector {
  51. margin-left: 10px;
  52. }
  53. .dataTables_length .selector select {
  54. width: 50px !important;
  55. }
  56. .box .dataTables_length {
  57. margin-right: 15px;
  58. }
  59. .dataTables_filter {
  60. width: auto;
  61. float: left;
  62. text-align: left;
  63. }
  64. .dataTables_filter input {
  65. margin-left: 10px;
  66. background: url(img/search.png) no-repeat 98% center;
  67. }
  68. .box .dataTables_filter {
  69. margin-left: 15px;
  70. }
  71. .dataTables_info {
  72. width: auto;
  73. float: left;
  74. margin-top: 10px;
  75. padding-left: 10px;
  76. }
  77. .box .dataTables_info {
  78. margin-top: 15px;
  79. margin-bottom: 15px;
  80. }
  81. .dataTables_paginate {
  82. float: right;
  83. text-align: right;
  84. margin-top: 10px;
  85. margin-right: 10px;
  86. }
  87. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  88. * DataTables display
  89. */
  90. table.display {
  91. margin: 0 auto;
  92. clear: both;
  93. width: 100%;
  94. }
  95. table.display thead tr {
  96. background: rgb(255, 255, 255);
  97. background:
  98. url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  99. background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  100. rgba(243, 243, 243, 1) 100% );
  101. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255,
  102. 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) );
  103. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  104. rgba(243, 243, 243, 1) 100% );
  105. background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  106. rgba(243, 243, 243, 1) 100% );
  107. background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  108. rgba(243, 243, 243, 1) 100% );
  109. background: linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  110. rgba(243, 243, 243, 1) 100% );
  111. filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
  112. '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 );
  113. -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  114. -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  115. box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  116. }
  117. table.display thead th {
  118. font-weight: bold;
  119. cursor: pointer; *
  120. cursor: hand;
  121. }
  122. table.display tfoot tr {
  123. background: rgb(255, 255, 255);
  124. background:
  125. url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  126. background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  127. rgba(243, 243, 243, 1) 100% );
  128. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255,
  129. 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) );
  130. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  131. rgba(243, 243, 243, 1) 100% );
  132. background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  133. rgba(243, 243, 243, 1) 100% );
  134. background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  135. rgba(243, 243, 243, 1) 100% );
  136. background: linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  137. rgba(243, 243, 243, 1) 100% );
  138. filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
  139. '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 );
  140. -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  141. -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  142. box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  143. border-bottom: 1px solid #c4c4c4;
  144. }
  145. table.display tfoot th {
  146. font-weight: bold;
  147. }
  148. .box table.display tfoot th {
  149. border-bottom: 1px solid #c4c4c4;
  150. }
  151. table.display tr.heading2 td {
  152. border-bottom: 1px solid #aaa;
  153. }
  154. table.display td {
  155. padding: 3px 2px;
  156. }
  157. table.display th {
  158. padding: 3px 3px;
  159. }
  160. table.display td.center {
  161. text-align: center;
  162. width: auto;
  163. display: table-cell;
  164. }
  165. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  166. * DataTables sorting
  167. */
  168. .sorting_asc {
  169. background: url('img/sort_asc.png') no-repeat center right
  170. !important;
  171. }
  172. .sorting_desc {
  173. background: url('img/sort_desc.png') no-repeat center right
  174. !important;
  175. }
  176. .sorting {
  177. background: url('img/sort_both.png') no-repeat center right
  178. !important;
  179. }
  180. .sorting_asc_disabled {
  181. background: url('img/sort_asc_disabled.png') no-repeat center
  182. right !important;
  183. }
  184. .sorting_desc_disabled {
  185. background: url('img/sort_desc_disabled.png') no-repeat center
  186. right !important;
  187. }
  188. th:active {
  189. outline: none;
  190. }
  191. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  192. * DataTables row classes
  193. */
  194. table.display tr.odd.gradeA {
  195. background-color: #ffffff;
  196. }
  197. table.display tr.even.gradeA {
  198. background-color: #f7f7f7;
  199. }
  200. table.display tr.odd.gradeC {
  201. background-color: #ffffff;
  202. }
  203. table.display tr.even.gradeC {
  204. background-color: #f7f7f7;
  205. }
  206. table.display tr.odd.gradeX {
  207. background-color: #ffffff;
  208. }
  209. table.display tr.even.gradeX {
  210. background-color: #f7f7f7;
  211. }
  212. table.display tr.odd.gradeU {
  213. background-color: #ffffff;
  214. }
  215. table.display tr.even.gradeU {
  216. background-color: #f7f7f7;
  217. }
  218. tr.odd {
  219. background-color: #f7f7f7;
  220. }
  221. tr.even {
  222. background-color: white;
  223. }
  224. .dataTables_scroll {
  225. clear: both;
  226. }
  227. .dataTables_scrollBody {
  228. *margin-top: -1px;
  229. -webkit-overflow-scrolling: touch;
  230. }
  231. .top .dataTables_info {
  232. float: none;
  233. }
  234. .clear {
  235. clear: both;
  236. }
  237. .dataTables_empty {
  238. text-align: center;
  239. }
  240. tfoot input {
  241. margin: 0.5em 0;
  242. width: 100%;
  243. color: #444;
  244. }
  245. tfoot input.search_init {
  246. color: #999;
  247. }
  248. td.group {
  249. background-color: #d1cfd0;
  250. border-bottom: 2px solid #A19B9E;
  251. border-top: 2px solid #A19B9E;
  252. }
  253. td.details {
  254. background-color: #d1cfd0;
  255. border: 2px solid #A19B9E;
  256. }
  257. .example_alt_pagination div.dataTables_info {
  258. width: 40%;
  259. }
  260. .paging_full_numbers {
  261. height: 28px;
  262. }
  263. .paging_full_numbers a:active {
  264. color: #f2f2f2;
  265. box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #67c3da inset;
  266. border-color: #5098aa;
  267. background: #88BBC8;
  268. }
  269. .paging_full_numbers a:hover {
  270. border: 1px solid #a3a3a3;
  271. background: #e8e6e6;
  272. }
  273. .paging_full_numbers a.paginate_button,.paging_full_numbers a.paginate_active
  274. {
  275. border: 1px solid #aaa;
  276. -webkit-border-radius: 5px;
  277. -moz-border-radius: 5px;
  278. padding: 2px 5px;
  279. margin: 0 3px;
  280. cursor: pointer;
  281. *cursor: hand;
  282. color: #333 !important;
  283. }
  284. .paging_full_numbers a.paginate_button {
  285. display: inline-block;
  286. float: left;
  287. padding: 0 14px;
  288. line-height: 28px;
  289. text-decoration: none;
  290. border: 1px solid #c4c4c4;
  291. border-left-width: 1px;
  292. background: rgb(255, 255, 255);
  293. background:
  294. url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  295. background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  296. rgba(243, 243, 243, 1) 100% );
  297. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255,
  298. 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) );
  299. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  300. rgba(243, 243, 243, 1) 100% );
  301. background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  302. rgba(243, 243, 243, 1) 100% );
  303. background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  304. rgba(243, 243, 243, 1) 100% );
  305. background: linear-gradient(top, rgba(255, 255, 255, 1) 1%,
  306. rgba(243, 243, 243, 1) 100% );
  307. filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
  308. '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 );
  309. min-height: 28px;
  310. color: #717171;
  311. box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #fff inset;
  312. margin-right: 4px;
  313. -webkit-border-radius: 2px 2px 2px 2px;
  314. -moz-border-radius: 2px 2px 2px 2px;
  315. border-radius: 2px 2px 2px 2px;
  316. font-weight: 700;
  317. }
  318. .paging_full_numbers a.paginate_button:hover {
  319. border: 1px solid #a3a3a3;
  320. background: #e8e6e6;
  321. }
  322. .paging_full_numbers a.paginate_active {
  323. color: #f2f2f2;
  324. box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #67c3da inset;
  325. border-color: #5098aa;
  326. background: #88BBC8;
  327. float: left;
  328. padding: 0 14px;
  329. line-height: 28px;
  330. -webkit-border-radius: 2px 2px 2px 2px;
  331. -moz-border-radius: 2px 2px 2px 2px;
  332. border-radius: 2px 2px 2px 2px;
  333. font-weight: 700;
  334. cursor: default;
  335. text-decoration: none;
  336. color: #fff;
  337. }
  338. /*表格样式*/
  339. .table {position: relative;}
  340. .table td { border-top: 1px solid #c4c4c4;}
  341. .table thead th, .table tbody td {text-align: center;}
  342. .table thead th:first-child, .table tbody td:first-child {text-align: left;}
  343. .table tr {
  344. -moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
  345. -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  346. box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  347. }
  348. .table tbody {background-color:#fafafa;}
  349. .table tbody + tbody {border-top: 2px solid #c4c4c4;}
  350. .table tbody tr:last-child{border-bottom: 1px solid #c4c4c4;}
  351. .table thead th {
  352. background: rgb(255,255,255);
  353. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  354. background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(243,243,243,1) 100%);
  355. background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
  356. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  357. background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  358. background: -ms-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  359. background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  360. -moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
  361. -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  362. box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
  363. }
  364. .table-bordered {
  365. border-color: #c4c4c4;
  366. border-top:1px solid transparent;
  367. -webkit-border-radius: 2px;
  368. -moz-border-radius: 2px;
  369. border-radius: 2px;
  370. padding-bottom: 1px;
  371. border-collapse: collapse;
  372. margin-top:-1px;
  373. margin-left:-1px;
  374. }
  375. .table caption + thead tr:first-child th,.table caption + thead tr:first-child td,.table colgroup + thead tr:first-child th,
  376. .table colgroup + thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td {
  377. border-top: 1px solid #c4c4c4;
  378. }
  379. .table-bordered th,.table-bordered td { border-left: 1px solid #c4c4c4;}
  380. .table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
  381. -webkit-border-top-left-radius: 2px;
  382. border-top-left-radius: 2px;
  383. -moz-border-radius-topleft: 2px;
  384. }
  385. .table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child {
  386. -webkit-border-top-right-radius: 2px;
  387. border-top-right-radius: 2px;
  388. -moz-border-radius-topright: 2px;
  389. }
  390. .table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child {
  391. -webkit-border-radius: 0 0 0 2px;
  392. -moz-border-radius: 0 0 0 2px;
  393. border-radius: 0 0 0 2px;
  394. -webkit-border-bottom-left-radius: 2px;
  395. border-bottom-left-radius: 2px;
  396. -moz-border-radius-bottomleft: 2px;
  397. }
  398. .table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child {
  399. -webkit-border-bottom-right-radius: 2px;
  400. border-bottom-right-radius: 2px;
  401. -moz-border-radius-bottomright: 2px;
  402. }
  403. .table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th {
  404. background-color: #f7f7f7;
  405. }
  406. .table tbody tr:hover td,
  407. .table tbody tr:hover th {
  408. background-color: #e8eaeb;
  409. }
  410. .noPad .table {border: 1px solid transparent;margin-bottom: -1px; margin-top:-1px;}
  411. .box .dataTables_wrapper {margin-left: -1px;}