2017 年 11 月

[bizhong]

合并表格边框

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid grey;
}

[bizhong]

表格自动换行

<table class="table">
  <tr>
    <th>序号</th>
    <th>姓名</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
  </tr>
</table>

.table {
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #eaecef;
  width: 100%;
  font-size: 12px;
  line-height: 18px;
}

.table tr th {
  border: 1px solid #eaecef;
  padding: 8px;
  font-weight: normal;
  background-color: #f1f8ff;
}

.table tr td {
  border: 1px solid #eaecef;
  padding: 12px 8px;
  text-align: center;
  word-wrap: break-word;
}

这样会导致表格单元格等宽，解决方法：col 标签设置 width。

<!-- 加入 thead、tbody、tfoot，代码更优雅 -->
<table class="table">
  <colgroup>
    <col width="10%">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
    </tr>
  </tbody>
</table>