登录  /  注册
博主信息
博文 17
粉丝 0
评论 1
访问量 13952
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
css精确的控制表格的显示-2019.9.6
Alfred的博客
原创
534人浏览过

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可以设置圆角属性,配合伪类选择器使用可以设置想要的效果。

批改状态:合格

老师批语:是的, 圆角一直是css中的一个盲区 , 比较难处理
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学