表格

系统默认表格

<table>
  ...
</table>

.table H-ui默认

<table class="table">
  ...
</table>

.table-border 带水平线

<table class="table table-border">
  ...
</table>

.table-bg th带背景

<table class="table table-border table-bg">
  ...
</table>

.table-bordered 带外边框

<table class="table table-border table-bordered">
  ...
</table>

.radius 圆角

<table class="table table-border table-bordered radius">
  ...
</table>

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

<table class="table table-border table-bordered table-striped">
  ...
</table>

.table-hover 鼠标悬停样式

<table class="table table-border table-bordered table-hover">
  ...
</table>

定义颜色

<table class="table table-border table-bg 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>

对齐方式

<table class="table table-border 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 设置

CSS代码

/*默认table*/
table{width:100%;empty-cells:show;background-color:transparent;border-collapse:collapse;border-spacing:0}
table th{text-align:left; font-weight:400}
/*带水平线*/
.table th{font-weight:bold}
.table th,.table td{padding:8px;line-height:20px}
.table td{text-align:left}
.table tbody tr.success > td{background-color:#dff0d8}
.table tbody tr.error > td{background-color:#f2dede}
.table tbody tr.warning > td{background-color:#fcf8e3}
.table tbody tr.info > td{background-color:#d9edf7}
.table tbody + tbody{border-top:2px solid #ddd}
.table .table{background-color:#fff}

/*带横向分割线*/
.table-border{border-top:1px solid #ddd}
.table-border th,.table-border td{border-bottom:1px solid #ddd}

/*th带背景*/
.table-bg thead th{background-color:#F5FAFE}
/*带外边框*/
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}

/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
/*竖直方向padding缩减一半*/
.table-condensed th,.table-condensed td{padding:4px 5px}
/*鼠标悬停样式*/
.table-hover tbody tr:hover td,.table-hover tbody tr:hover th{background-color: #f5f5f5}
/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,.table tbody tr.active>td,.table tbody tr.active>th,.table tbody tr .active{background-color:#F5F5F5!important}
/*成功或积极*/
.table tbody tr.success,.table tbody tr.success>td,.table tbody tr.success>th,.table tbody tr .success{background-color:#DFF0D8!important}

/*警告或出错*/
.table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning{background-color:#FCF8E3!important}
/*危险*/
.table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger{background-color:#F2DEDE!important}

/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th,.table .text-c td{text-align:center}/*整行居中*/
.table .text-r th,.table .text-r td{text-align:right}/*整行居右*/
.table th.text-l,.table td.text-l{text-align:left!important}/*单独列居左*/
.table th.text-c,.table td.text-c{text-align:center!important}/*单独列居中*/
.table th.text-r,.table td.text-r{text-align:right!important}/*单独列居右*/