css精确的控制表格的显示-2019.9.6

1.CSS控制表格样式，并制作一张带有四个圆角的表格

实例

<style>
  /* 表格样式 */
/*给表格加上边框*/
table {
    border-spacing: 0;
    border-right: 2px solid #eaeaea;
    border-left: 2px solid #eaeaea;
    /* 折叠边框线 */
    border-collapse: separate;
    width: 800px;
    margin: 20px auto;
    border-radius:12px; /*圆角设置属性*/

}

th, td {
    border: 1px solid #eaeaea;
    text-align: center;
    padding: 10px;
    border-right: 2px solid #eaeaea;
    border-left: 2px solid #eaeaea;
}

table caption {
    font-size: 1.3rem;
    /*文本加粗*/
    font-weight: bolder;
    margin-bottom: 15px;
}

table thead > tr:first-of-type {
  background-color: lightgreen;
}

table thead > tr:first-of-type > th:nth-of-type(1) {
  border-top-left-radius: 12px;
}

table thead > tr:first-of-type > th:nth-of-type(6) {
  border-top-right-radius: 12px;
}

table tfoot > tr:last-child > td:first-child {
  border-bottom-left-radius: 12px;
}

table tfoot > tr:last-child > td:last-child {
  border-bottom-right-radius: 12px;
}

table tbody > tr:first-of-type > td:first-of-type {
  background-color: wheat;
}

table tbody > tr:nth-last-of-type(2) > td:first-of-type {
  background-color: wheat;
}

table tfoot > tr:last-of-type {
  background-color: lightgray;
}

/* 美化表格 */
table {
  box-shadow: 2px 2px 2px #888888;
  position: relative;
}

table:before {
  /* 伪元素内容、大小、位置 */
  content: '';
  width: 798px;
  height: 294px;
  position: absolute;
  left: 0;
  top: 45px;
  /* 伪元素背景 */
  background-image: url("https://images.chinatimes.com/newsphoto/2019-09-07/900/20190907002801.jpg");
  background-size: cover;
  opacity: 0.3;
}

</style>

<div>
  <table>
    <!-- 标题 -->
    <caption>PHP中文网第八期 - 课程表</caption>
    <!-- 表头 -->
    <thead>
      <tr>
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <!-- 主体 -->
    <tbody>
      <tr>
        <td rowspan="3">上午<br>8:00 - 11:30</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>化学</td>
      </tr>
      <tr>
        <td rowspan="2">下午<br>13:00 - 16:30</td>
        <td>体育</td>
        <td>音乐</td>
        <td>美术</td>
        <td>政治</td>
        <td>历史</td>
      </tr>
      <tr>
        <td>体育</td>
        <td>音乐</td>
        <td>美术</td>
        <td>政治</td>
        <td>历史</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>备注：</td>
        <td colspan="5">周末开家长会</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td> -->
      </tr>
    </tfoot>
  </table>
</div>

2.总结

    表格属性中：

        border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）；

        border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框；

        border-radius可以设置圆角属性，配合伪类选择器使用可以设置想要的效果。