/* * File: demo_table.css * CVS: $Id: datatables_style.css,v 1.1 2012/12/05 01:39:36 ghp Exp $ * Description: CSS descriptions for DataTables demo pages * Author: Allan Jardine * Created: Tue May 12 06:47:22 BST 2009 * Modified: $Date: 2012/12/05 01:39:36 $ by $Author: ghp $ * Language: CSS * Project: DataTables * Common issues: * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is * no conflict between the two pagination types. If you want to use full_numbers pagination * ensure that you either have "example_alt_pagination" as a body class name, or better yet, * modify that selector. * Note that the path used for Images is relative. All images are by default located in * images/ - relative to this CSS file. */ .dataTables_wrapper { position: relative; clear: both; zoom: 1; /* Feeling sorry for IE */ } .box .dataTables_wrapper { padding-top: 5px; } /*列表长度下拉框宽度*/ div.dataTables_length select { width: 60px; } .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 250px; height: 30px; margin-left: -125px; margin-top: -15px; padding: 14px 0 2px 0; border: 1px solid #ddd; text-align: center; color: #999; font-size: 14px; background-color: white; } .dataTables_length { width: auto; float: right; } .dataTables_length .selector { margin-left: 10px; } .dataTables_length .selector select { width: 50px !important; } .box .dataTables_length { margin-right: 15px; } .dataTables_filter { width: auto; float: left; text-align: left; } .dataTables_filter input { margin-left: 10px; background: url(../images/search.png) no-repeat 98% center; } .box .dataTables_filter { margin-left: 15px; } .dataTables_info { width: auto; float: left; margin-top: 10px; padding-left: 10px; } .box .dataTables_info { margin-top: 15px; margin-bottom: 15px; } .dataTables_paginate { float: right; text-align: right; margin-top: 10px; margin-right: 10px; } /* Pagination nested */ .paginate_disabled_previous,.paginate_enabled_previous,.paginate_disabled_next,.paginate_enabled_next { display: inline-block; float: left; padding: 0 14px; line-height: 28px; text-decoration: none; border: 1px solid #c4c4c4; border-left-width: 1px; background: rgb(255, 255, 255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255, 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) ); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 ); min-height: 28px; color: #717171; box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #fff inset; margin-right: 4px; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; font-weight: 700; } .paginate_disabled_previous:hover,.paginate_enabled_previous:hover,.paginate_disabled_next:hover,.paginate_enabled_next:hover { text-decoration: none !important; } .paginate_disabled_previous:active,.paginate_enabled_previous:active,.paginate_disabled_next:active,.paginate_enabled_next:active { outline: none; } .paginate_disabled_previous,.paginate_disabled_next { color: #666 !important; } .paginate_disabled_previous,.paginate_enabled_previous { padding-left: 23px; } .paginate_disabled_next,.paginate_enabled_next { padding-right: 23px; margin-left: 10px; } .paginate_disabled_previous { opacity: 0.7; filter: alpha(opacity = 70); } .paginate_enabled_previous,.paginate_enabled_next:hover { opacity: 1; filter: alpha(opacity = 100); cursor: pointer; } .paginate_enabled_previous:hover { border: 1px solid #a3a3a3; background: #e8e6e6; } .paginate_disabled_next { opacity: 0.7; filter: alpha(opacity = 70); } .paginate_enabled_next { opacity: 1; filter: alpha(opacity = 100); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables display */ table.display { margin: 0 auto; clear: both; width: 100%; /* Note Firefox 3.5 and before have a bug with border-collapse * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) * border-spacing: 0; is one possible option. Conditional-css.com is * useful for this kind of thing * * Further note IE 6/7 has problems when calculating widths with border width. * It subtracts one px relative to the other browsers from the first column, and * adds one to the end... * * If you want that effect I'd suggest setting a border-top/left on th/td's and * then filling in the gaps with other borders. */ } table.display thead tr { background: rgb(255, 255, 255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255, 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) ); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 ); -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1); box-shadow: 0 1px 0px rgba(255, 255, 255, 1); } table.display thead th { font-weight: bold; cursor: pointer; * cursor: hand; } table.display tfoot tr { background: rgb(255, 255, 255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255, 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) ); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 ); -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1); box-shadow: 0 1px 0px rgba(255, 255, 255, 1); border-bottom: 1px solid #c4c4c4; } table.display tfoot th { font-weight: bold; } .box table.display tfoot th { border-bottom: 1px solid #c4c4c4; } table.display tr.heading2 td { border-bottom: 1px solid #aaa; } table.display td { padding: 3px 2px; } table.display th { padding: 3px 3px; } table.display td.center { text-align: center; width: auto; display: table-cell; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables sorting */ .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right !important; } .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right !important; } .sorting { background: url('../images/sort_both.png') no-repeat center right !important; } .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right !important; } .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right !important; } th:active { outline: none; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables row classes */ table.display tr.odd.gradeA { background-color: #ffffff; } table.display tr.even.gradeA { background-color: #f7f7f7; } table.display tr.odd.gradeC { background-color: #ffffff; } table.display tr.even.gradeC { background-color: #f7f7f7; } table.display tr.odd.gradeX { background-color: #ffffff; } table.display tr.even.gradeX { background-color: #f7f7f7; } table.display tr.odd.gradeU { background-color: #ffffff; } table.display tr.even.gradeU { background-color: #f7f7f7; } tr.odd { background-color: #f7f7f7; } tr.even { background-color: white; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Misc */ .dataTables_scroll { clear: both; } .dataTables_scrollBody { *margin-top: -1px; -webkit-overflow-scrolling: touch; } /*.top, .bottom { padding: 15px; background-color: #F5F5F5; border: 1px solid #CCCCCC; }*/ .top .dataTables_info { float: none; } .clear { clear: both; } .dataTables_empty { text-align: center; } tfoot input { margin: 0.5em 0; width: 100%; color: #444; } tfoot input.search_init { color: #999; } td.group { background-color: #d1cfd0; border-bottom: 2px solid #A19B9E; border-top: 2px solid #A19B9E; } td.details { background-color: #d1cfd0; border: 2px solid #A19B9E; } .example_alt_pagination div.dataTables_info { width: 40%; } .paging_full_numbers { height: 28px; } .paging_full_numbers a:active { color: #f2f2f2; box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #67c3da inset; border-color: #5098aa; background: #88BBC8; } .paging_full_numbers a:hover { border: 1px solid #a3a3a3; background: #e8e6e6; } .paging_full_numbers a.paginate_button,.paging_full_numbers a.paginate_active { border: 1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 2px 5px; margin: 0 3px; cursor: pointer; *cursor: hand; color: #333 !important; } .paging_full_numbers a.paginate_button { display: inline-block; float: left; padding: 0 14px; line-height: 28px; text-decoration: none; border: 1px solid #c4c4c4; border-left-width: 1px; background: rgb(255, 255, 255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255, 255, 255, 1) ), color-stop(100%, rgba(243, 243, 243, 1) ) ); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); background: linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(243, 243, 243, 1) 100% ); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#ffffff', endColorstr = '#f3f3f3', GradientType = 0 ); min-height: 28px; color: #717171; box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #fff inset; margin-right: 4px; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; font-weight: 700; } .paging_full_numbers a.paginate_button:hover { border: 1px solid #a3a3a3; background: #e8e6e6; } .paging_full_numbers a.paginate_active { color: #f2f2f2; box-shadow: 0 1px 0 #eaeaea, 0 1px 0 #67c3da inset; border-color: #5098aa; background: #88BBC8; float: left; padding: 0 14px; line-height: 28px; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; font-weight: 700; cursor: default; text-decoration: none; color: #fff; } table.display tr.even.row_selected td { background-color: #B0BED9; } table.display tr.odd.row_selected td { background-color: #9FAFD1; } /* * Sorting classes for columns */ /* For the standard odd/even */ tr.odd td.sorting_1 { /*background-color: #eeeeee;*/ } tr.odd td.sorting_2 { /*background-color: #eeeeee;*/ } tr.odd td.sorting_3 { /*background-color: #eeeeee;*/ } tr.even td.sorting_1 { /*background-color: #e0e0e0;*/ } tr.even td.sorting_2 { /*background-color: #e0e0e0;*/ } tr.even td.sorting_3 { /*background-color: #e0e0e0;*/ } /* For the Conditional-CSS grading rows */ /* Colour calculations (based off the main row colours) Level 1: dd > c4 ee > d5 Level 2: dd > d1 ee > e2 */ /*tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; } tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; } tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; } tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; } tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; } tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; } tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; } tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; } tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; } tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; } tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; } tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; } tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; } tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; } tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; } tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; } tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; } tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; } tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; } tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; } tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; } tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; } tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; } tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; }*/ /* * Row highlighting example */ .ex_highlight #example tbody tr.even:hover,#example tbody tr.even td.highlighted { background-color: #ECFFB3; } .ex_highlight #example tbody tr.odd:hover,#example tbody tr.odd td.highlighted { background-color: #E6FF99; } .ex_highlight_row #example tr.even:hover { background-color: #ECFFB3; } .ex_highlight_row #example tr.even:hover td.sorting_1 { background-color: #DDFF75; } .ex_highlight_row #example tr.even:hover td.sorting_2 { background-color: #E7FF9E; } .ex_highlight_row #example tr.even:hover td.sorting_3 { background-color: #E2FF89; } .ex_highlight_row #example tr.odd:hover { background-color: #E6FF99; } .ex_highlight_row #example tr.odd:hover td.sorting_1 { background-color: #D6FF5C; } .ex_highlight_row #example tr.odd:hover td.sorting_2 { background-color: #E0FF84; } .ex_highlight_row #example tr.odd:hover td.sorting_3 { background-color: #DBFF70; } /* * KeyTable */ table.KeyTable td { border: 3px solid transparent; } table.KeyTable td.focus { border: 3px solid #3366FF; } table.display tr.gradeA { background-color: #eeffee; } table.display tr.gradeC { background-color: #ddddff; } table.display tr.gradeX { background-color: #ffdddd; } table.display tr.gradeU { background-color: #ddd; }