首页>基础>表格

表格

文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/

系统默认表格

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table>
  ...
</table>

hui-table H-ui默认

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table">
  ...
</table>

hui-table-border 带水平线

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border">
...
</table>

hui-table-bg th带背景

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border hui-table-bg">
...
</table>

hui-table-bordered 带外边框

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border hui-table-bordered">
  ...
</table>

.radius 圆角

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border hui-table-bordered radius">
  ...
</table>

hui-table-striped 奇数行背景设为浅灰色

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border hui-table-bordered hui-table-striped">
  ...
</table>

hui-table-hover 鼠标悬停样式

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
<table class="hui-table hui-table-border hui-table-bordered hui-table-hover">
  ...
</table>

定义颜色

Class 描述
.active 悬停在行
.success 成功或积极
.warning 警告或出错
.danger 危险
<table class="hui-table hui-table-border hui-table-bg hui-table-bordered">
  <thead>
    <tr><th width="20%">Class</th><th>描述</th></tr>
  </thead>
  <tbody>
    <tr class="active"><th>.active</th><td>悬停在行</td></tr>
    <tr class="success"><th>.success</th><td>成功或积极</td></tr>
    <tr class="warning"><th>.warning</th><td>警告或出错</td></tr>
    <tr class="danger"><th>.danger</th><td>危险</td></tr>
  </tbody>
</table>

对齐方式

对齐方式 类名
居左 默认
居中 .text-c
居右 .text-r
<table class="hui-table hui-table-border hui-table-bordered">
  <thead class="text-c">
    <tr>
      <th>对齐方式</th>
      <th>类名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>居左</td>
      <td>默认</td>
    </tr>
    <tr class="text-c">
      <td>居中</td>
      <td>.text-c</td>
    </tr>
    <tr class="text-r">
      <td>居右</td>
      <td>.text-r</td>
    </tr>
  </tbody>
</table>

友情提示:可以给tr整行加,也可以单独给td 或者th 设置

SCSS CSS
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;
  }
}