表格常见 CSS 样式设置

一、 相关属性

• 1. 合并表格的属性 (HTML 属性)

  colspan="number" // 合并列
  rowspan="number" // 合并行
  

• 2. 表格边框合并 (CSS)

  // 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
  border-collapse: separate;
  // 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
   border-collapse: collapse;
   // 规定应该从父元素继承 border-collapse 属性的值。
   border-collapse: inherit;
  

• 3. 表格布局 (CSS)

  // 默认。列宽度由单元格内容设定。
  table-layout:automatic;
  // 列宽由表格宽度和列宽度设定。设置内部表格宽度有效
  table-layout:fixed;
  // 规定应该从父元素继承 table-layout 属性的值。
  table-layout:inherit;
  

二、 简单示例

• 1. HTML 代码

  <table>
    <thead>
      <tr>
        <th colspan="2">占2列位</th>
        <th>占位符</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">占3行</td>
        <td>占2行</td>
        <td>占2行</td>
      </tr>
      <tr>
        <td>占位符</td>
        <td>占位符</td>
      </tr>
      <tr>
        <td>占位符</td>
        <td>占位符</td>
      </tr>
    </tbody>
  </table>
  

• 2. CSS 代码

  table {
    width: 200px;
    margin: 200px;
    text-align: center;
    border: 1px solid #797979;
    /* 合并边框 */
    border-collapse: collapse;
    /* 设置内部表格宽度有效 */
    table-layout: fixed;
    /* 允许长单词换行到下一行 */
    word-wrap: break-word;
    /* 在恰当的断字点进行换行 - 允许单词内换行 */
    word-break: break-all;
  }
  th {
    height: 40px;
    border: 1px solid #797979;
  }
  td {
    height: 40px;
    border: 1px solid #797979;
  }
  

• 3. 示例图片

     
     table.png