css系列-table

表格

表格可以非常快速的部署数据，灵活控制表格样式是必要的。表格不能设置外边距。

定制表格

除了使用 table 标签绘制表格外，也可以使用样式绘制。

样式规则	说明
table	对应 table
table-caption	对应 caption
table-row	对表 tr
table-row-group	对应 tbody
table-header-group	对应 thead
table-footer-group	对应 tfoot

<style>
	article {
  display: table;
  font-size: 20px;
  border: 1px solid #ddd;
  text-align: center;
}
article nav {
  display: table-caption;
  text-align: center;
  background: #333;
  color: white;
}
article section:nth-of-type(1) {
  display: table-header-group;
}
article section:nth-of-type(2) {
  display: table-row-group;
}
article section:nth-of-type(3) {
  display: table-footer-group;
}
article section ul {
  display: table-row;
}
article section ul li {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

<article>
      <nav>CSS表格</nav>
      <section>
        <ul>
          <li>标题</li>
          <li>内容</li>
        </ul>
      </section>
      <section>
        <ul>
          <li>前端</li>
          <li>javascript</li>
        </ul>
      </section>
      <section>
        <ul>
          <li>后端</li>
          <li>java</li>
        </ul>
      </section>
</article>

表格标题

通过 caption-side 可以设置标题位置，值可以设置为 top | bootom。

<style>
  table caption {
    background: black;
    color: white;
    padding: 10px;
    caption-side: bottom;
  }
</style>

<table border="1">
        <caption>CSS表格</caption>
        <tr>
            <td>标题</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>前端</td>
            <td>Javascript</td>
        </tr>
</table>

内容对齐

水平对齐使用 text-align 文本对齐规则

<style>
  table tr td {
    height: 100px;
    text-align: center;
  }
</style>

垂直对齐使用 vertical-align 处理

属性	说明
top	顶对齐
middle	垂直居中
bottom	底部对齐

<style>
	table tr td {
    height: 100px;
    vertical-align: bottom;
    text-align: center;
  }
</style>

颜色设置

为表格设置颜色与普通标签相似，可以为 table | thead | tbody | caption | tfoot| tr| td 设置颜色样式。

可以给tr和td设置颜色，td会覆盖tr的颜色

<style>
	table tr {
        color: black;
      }
      table tbody tr:nth-of-type(odd) {
        background: red;
      }
      table thead tr td:nth-child(odd) {
        background: #067db4;
      }
</style>

使用选择器设置表格隔行变色

<style>
        table thead tr {
            background: #118d68;
            color: #fff;
        }

        table tbody tr:nth-child(odd) {
            background: #1bb385;
            color: white;
        }
</style>

边框间距

设置单元格间距，设置间距上下5px ，左右 10px。

table {
    border-spacing: 5px 10px;
}

边框合并

默认表格边框间是有间距的，以下示例将边框合并形成细线表格。

table {
  border-collapse: collapse;
}

隐藏单元格

<style>
  table {
      empty-cells: hide;
  }
</style>
...

<table border="1">
      <thead>
        <tr>
          <td>标题</td>
          <td>内容</td>
          <td>其他</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>前端</td>
          <td>javascript</td>
          <td>css</td>
        </tr>
        <tr>
          <td>后端</td>
          <td>java</td>
          <td>php</td>
        </tr>
        <tr>
          <td>数据库</td>
          <td>mysql</td>
          <td></td>
        </tr>
      </tbody>
    </table>

无边框表格

<style>
        table {
        border-collapse: collapse;
        border: none;
      }
      table td {
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
      }
      table tr:nth-of-type(1) {
        border-top: 1px solid #ddd;
      }
      table tr td:last-of-type {
        border-right: none;
      }
      table td {
        padding: 5px 15px;
      }
      table tr {
        color: black;
      }
</style>
...
 <table>
      <thead>
        <tr>
          <td>标题</td>
          <td>内容</td>
          <td>其他</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>前端</td>
          <td>javascript</td>
          <td>css</td>
        </tr>
        <tr>
          <td>后端</td>
          <td>java</td>
          <td>php</td>
        </tr>
        <tr>
          <td>数据库</td>
          <td>mysql</td>
          <td>Oracle</td>
        </tr>
      </tbody>
    </table>

数据表格

可以为表格元素使用伪类控制样式，下例中使用 hover 伪类样式

<style>
      table {
        border-collapse: collapse;
        border: none;
      }
      table td {
        border-bottom: 1px solid #ddd;
      }
      table tr:nth-of-type(1) {
        border-top: 1px solid #ddd;
      }
      table tr td:last-of-type {
        border-right: none;
      }
      table td {
        padding: 5px 15px;
      }
      table tr {
        color: black;
      }
      table tr:hover {
        background: #000;
        color: #fff;
      }
</style>
    
<table>
      同上
</table>