table {
width: 100%;
empty-cells: show;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
th {
text-align: left;
font-weight: 400
}
/*竖直方向padding缩减一半*/
&.hui-table-condensed th,
&.hui-table-condensed td {
padding: 4px 5px
}
&.hui-table {
/*带水平线*/
th {
font-weight: bold;
}
td {
text-align: left
}
th,
td {
padding: 8px;
line-height: 20px;
word-break: break-all
}
tbody {
tr.success>td {
background-color: #dff0d8;
}
tr.error>td {
background-color: #f2dede
}
tr.warning>td {
background-color: #fcf8e3
}
tr.info>td {
background-color: #d9edf7
}
+tbody {
border-top: 2px solid #ddd;
}
}
.hui-table {
background-color: #fff;
}
/*带横向分割线*/
&.hui-table-border {
border-top: 1px solid #ddd;
th,
td {
border-bottom: 1px solid #ddd
}
}
/*th带背景*/
&.hui-table-bg thead th {
background-color: #F5FAFE
}
/*带外边框*/
&.hui-table-bordered {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
th,
td {
border-left: 1px solid #ddd
}
&.hui-table-bordered {
border-bottom: 0
}
}
/*奇数行背景设为浅灰色*/
&.hui-table-striped tbody>tr:nth-child(odd)>td,
&.hui-table-striped tbody>tr:nth-child(odd)>th {
background-color: #f9f9f9
}
/*竖直方向padding缩减一半*/
&.hui-table-condensed th,
&.hui-table-condensed td {
padding: 4px 5px
}
/*鼠标悬停样式*/
&.hui-table-hover tbody tr:hover td,
&.v-hover tbody tr:hover th {
background-color: #f5f5f5
}
tbody{
tr.selected td { /*鼠标选择整行样式*/
background-color: #F3F3F3
}
tr.active,
tr.active > td,
tr.active > th,
tr .active { /*悬停在行*/
background-color: #F5F5F5!important
}
tr.success,
tr.success > td,
tr.success > th,
tr .success { /*成功或积极*/
background-color: #DFF0D8!important
}
tr.warning,
tr.warning > td,
tr.warning > th,
tr .warning { /*警告或出错*/
background-color: #FCF8E3!important
}
tr.danger,
tr.danger > td,
tr.danger > th,
tr .danger { /*危险*/
background-color: #F2DEDE!important
}
}
/*表格文字对齐方式,默认是居左对齐*/
.text-l th,
.text-l td {
text-align: left;
}
/*整行居中*/
.text-c th,
.text-c td {
text-align: center;
}
/*整行居右*/
.text-r th,
.text-r td {
text-align: right;
}
/*单独列居左*/
th.text-l,
td.text-l {
text-align: left!important;
}
/*单独列居中*/
th.text-c,
td.text-c {
text-align: center!important;
}
/*单独列居右*/
th.text-r,
td.text-r {
text-align: right!important;
}
/*圆角*/
&.radius thead th:first-child {
border-top-left-radius: 4px;
}
&.radius thead th:last-child {
border-top-right-radius: 4px;
}
&.radius tr:last-child td:first-child {
border-bottom-left-radius: 4px;
}
&.radius tr:last-child td:last-child {
border-bottom-right-radius: 4px;
}
}
}
/*datatable*/
table.dataTable {
border-collapse: separate;
border-spacing: 0;
clear: both;
thead{
.sorting_asc,
.sorting_desc,
.sorting {
cursor: pointer;
background-repeat: no-repeat;
background-position: right center;
}
.sorting {
background-image: url(../images/dataTable/sort_both.png)
}
.sorting_asc {
background-image: url(../images/dataTable/sort_asc.png)
}
.sorting_desc {
background-image: url(../images/dataTable/sort_desc.png)
}
}
td.sorting_1 {
background-color: #f5fafe
}
}
.dataTables_wrapper {
.dataTables_length {
float: left;
padding-bottom: 20px;
.select {
width: 50px
}
}
.dataTables_filter {
float: right;
text-align: right;
.hui-input-text {
width: auto
}
}
.dataTables_info {
clear: both;
float: left;
padding-top: 10px;
font-size: 14px;
color: #666;
}
.dataTables_paginate {
float: right;
padding-top: 10px;
text-align: right;
.paginate_button {
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
margin-left: 2px;
text-align: center;
text-decoration: none;
color: #666;
height: 26px;
line-height: 26px;
text-decoration: none;
margin: 0 0px 6px 6px;
padding: 0 10px;
font-size: 14px;
&:hover,
&.current,
&.current:hover {
background: #5a98de;
color: #fff;
}
}
}
}
@media (max-width: 767px) {
.hui-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #ddd;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
>.hui-table {
margin-bottom: 0;
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td {
white-space: nowrap;
}
}
>.hui-table-bordered {
border: 0;
>thead>tr>th:first-child,
>tbody>tr>th:first-child,
>tfoot>tr>th:first-child,
>thead>tr>td:first-child,
>tbody>tr>td:first-child,
>tfoot>tr>td:first-child {
border-left: 0
}
>thead>tr>th:last-child,
>tbody>tr>th:last-child,
>tfoot>tr>th:last-child,
>thead>tr>td:last-child,
>tbody>tr>td:last-child,
>tfoot>tr>td:last-child {
border-right: 0
}
>tbody>tr:last-child>th,
>tfoot>tr:last-child>th,
>tbody>tr:last-child>td,
>tfoot>tr:last-child>td {
border-bottom: 0
}
}
}
}
table {
width: 100%;
empty-cells: show;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
/*竖直方向padding缩减一半*/
}
table th {
text-align: left;
font-weight: 400;
}
table.hui-table-condensed th, table.hui-table-condensed td {
padding: 4px 5px;
}
table.hui-table th {
font-weight: bold;
}
table.hui-table td {
text-align: left;
}
table.hui-table th,
table.hui-table td {
padding: 8px;
line-height: 20px;
word-break: break-all;
}
table.hui-table tbody tr.success > td {
background-color: #dff0d8;
}
table.hui-table tbody tr.error > td {
background-color: #f2dede;
}
table.hui-table tbody tr.warning > td {
background-color: #fcf8e3;
}
table.hui-table tbody tr.info > td {
background-color: #d9edf7;
}
table.hui-table tbody + tbody {
border-top: 2px solid #ddd;
}
table.hui-table .hui-table {
background-color: #fff;
}
table.hui-table.hui-table-border {
border-top: 1px solid #ddd;
}
table.hui-table.hui-table-border th,
table.hui-table.hui-table-border td {
border-bottom: 1px solid #ddd;
}
table.hui-table.hui-table-bg thead th {
background-color: #F5FAFE;
}
table.hui-table.hui-table-bordered {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
}
table.hui-table.hui-table-bordered th,
table.hui-table.hui-table-bordered td {
border-left: 1px solid #ddd;
}
table.hui-table.hui-table-bordered.hui-table-bordered {
border-bottom: 0;
}
table.hui-table.hui-table-striped tbody > tr:nth-child(odd) > td, table.hui-table.hui-table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
table.hui-table.hui-table-condensed th, table.hui-table.hui-table-condensed td {
padding: 4px 5px;
}
table.hui-table.hui-table-hover tbody tr:hover td, table.hui-table.v-hover tbody tr:hover th {
background-color: #f5f5f5;
}
table.hui-table tbody tr.selected td {
/*鼠标选择整行样式*/
background-color: #F3F3F3;
}
table.hui-table tbody tr.active,
table.hui-table tbody tr.active > td,
table.hui-table tbody tr.active > th,
table.hui-table tbody tr .active {
/*悬停在行*/
background-color: #F5F5F5 !important;
}
table.hui-table tbody tr.success,
table.hui-table tbody tr.success > td,
table.hui-table tbody tr.success > th,
table.hui-table tbody tr .success {
/*成功或积极*/
background-color: #DFF0D8 !important;
}
table.hui-table tbody tr.warning,
table.hui-table tbody tr.warning > td,
table.hui-table tbody tr.warning > th,
table.hui-table tbody tr .warning {
/*警告或出错*/
background-color: #FCF8E3 !important;
}
table.hui-table tbody tr.danger,
table.hui-table tbody tr.danger > td,
table.hui-table tbody tr.danger > th,
table.hui-table tbody tr .danger {
/*危险*/
background-color: #F2DEDE !important;
}
table.hui-table .text-l th,
table.hui-table .text-l td {
text-align: left;
}
table.hui-table .text-c th,
table.hui-table .text-c td {
text-align: center;
}
table.hui-table .text-r th,
table.hui-table .text-r td {
text-align: right;
}
table.hui-table th.text-l,
table.hui-table td.text-l {
text-align: left !important;
}
table.hui-table th.text-c,
table.hui-table td.text-c {
text-align: center !important;
}
table.hui-table th.text-r,
table.hui-table td.text-r {
text-align: right !important;
}
table.hui-table.radius thead th:first-child {
border-top-left-radius: 4px;
}
table.hui-table.radius thead th:last-child {
border-top-right-radius: 4px;
}
table.hui-table.radius tr:last-child td:first-child {
border-bottom-left-radius: 4px;
}
table.hui-table.radius tr:last-child td:last-child {
border-bottom-right-radius: 4px;
}
/*datatable*/
table.dataTable {
border-collapse: separate;
border-spacing: 0;
clear: both;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
cursor: pointer;
background-repeat: no-repeat;
background-position: right center;
}
table.dataTable thead .sorting {
background-image: url(../images/dataTable/sort_both.png);
}
table.dataTable thead .sorting_asc {
background-image: url(../images/dataTable/sort_asc.png);
}
table.dataTable thead .sorting_desc {
background-image: url(../images/dataTable/sort_desc.png);
}
table.dataTable td.sorting_1 {
background-color: #f5fafe;
}
.dataTables_wrapper .dataTables_length {
float: left;
padding-bottom: 20px;
}
.dataTables_wrapper .dataTables_length .select {
width: 50px;
}
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right;
}
.dataTables_wrapper .dataTables_filter .hui-input-text {
width: auto;
}
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 10px;
font-size: 14px;
color: #666;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
padding-top: 10px;
text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
margin-left: 2px;
text-align: center;
text-decoration: none;
color: #666;
height: 26px;
line-height: 26px;
text-decoration: none;
margin: 0 0px 6px 6px;
padding: 0 10px;
font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #5a98de;
color: #fff;
}
@media (max-width: 767px) {
.hui-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #ddd;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
.hui-table-responsive > .hui-table {
margin-bottom: 0;
}
.hui-table-responsive > .hui-table > thead > tr > th,
.hui-table-responsive > .hui-table > tbody > tr > th,
.hui-table-responsive > .hui-table > tfoot > tr > th,
.hui-table-responsive > .hui-table > thead > tr > td,
.hui-table-responsive > .hui-table > tbody > tr > td,
.hui-table-responsive > .hui-table > tfoot > tr > td {
white-space: nowrap;
}
.hui-table-responsive > .hui-table-bordered {
border: 0;
}
.hui-table-responsive > .hui-table-bordered > thead > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > thead > tr > td:first-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > td:first-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.hui-table-responsive > .hui-table-bordered > thead > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > thead > tr > td:last-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > td:last-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.hui-table-responsive > .hui-table-bordered > tbody > tr:last-child > th,
.hui-table-responsive > .hui-table-bordered > tfoot > tr:last-child > th,
.hui-table-responsive > .hui-table-bordered > tbody > tr:last-child > td,
.hui-table-responsive > .hui-table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}