php圆角矩形的表格代码,使用CSS制作一张带有四个圆角的表格

使用CSS制作一张带有四个圆角的表格

效果如下:

html部分代码:

实例

上海交通大学课程表

作息时间周1周2周3周4周5

上午 8:00-11:30 语文语文语文语文语文数学数学数学数学数学英语英语英语英语英语下午 13:30-15:30C语言C语言C语言C语言C语言sql数据库sql数据库sql数据库sql数据库sql数据库备注:下课前需要打卡签到:

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS  样式部分:

实例

table {

border: 1px solid #444444;

width: 800px;

margin: 30px auto;

box-shadow: 30px 30px 20px #888888;

margin: 0 auto;

position: relative;

/* --------设置四周圆角----- */

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

border-collapse: separate;

border-spacing: 0;

}

/* 背景图片的设置 */

table::before {

content: '';

width: 799px;

height: 300px;

position: absolute;

left: 0;

top: 45px;

background-image: url(https://hot.online.sh.cn/images/attachement/jpeg/site1/20180913/IMG0c54a505619e48682490159.jpeg);

background-size: cover;

opacity: 0.28;

/* --------设置四周圆角----- */

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

}

th,

td {

border: 1px solid #444444;

text-align: center;

padding: 10px;

}

table caption {

font-size: 1.3rem;

font-weight: bolder;

margin-bottom: 15px;

}

table thead>tr:first-of-type {

background-color: #00ccff;

}

table tbody>tr:first-of-type>td:first-of-type {

background-color: #FDE566;

}

table tbody>tr:nth-last-of-type(2)>td:first-of-type {

background-color: #bbdd00;

}

table tfoot td {

background-color: #f3bdbd;

}

--------设置四周单元格圆角---------

table th:first-of-type {

border-top-left-radius: 20px;

}

table th:last-of-type {

border-top-right-radius: 20px;

}

table tfoot td:first-of-type {

border-bottom-left-radius: 20px;

}

table tfoot td:last-of-type {

border-bottom-right-radius: 20px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结: 照着老师的效果图,自己百度各种CSS属性,最终以失败告终,~_~!.   惭愧.  后端语言有一定的逻辑性,从上到下依次执行,CSS层叠样式,居然玩不转了.....