CSS制作一张带有四个圆角的表格 示例如下：

实例

星期星期一星期二星期三星期四星期五

上午
8:30~11:50语文数学英语政治历史语文数学英语政治历史语文数学英语政治历史下午
13:50~17:30语文数学英语政治历史语文数学英语政治历史备注:每天值日生记得擦黑板、关教室灯、风扇

运行实例 »

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

实例

/* 为表格及单元格加上边框 */

table,th,td{

border:1px solid #444;

}

/* 将表格边框线折叠并居中显示 */

table{

border-collapse: collapse;

width: 800px;

margin:0 auto;

box-shadow: 5px 5px 8px #888;

position: relative;

/* 设置是否把表格边框合并为单一的边框 */

border-collapse: separate;

/* 设置单元格边框的距离 */

border-spacing: 0;

border-radius:10px;

}

/* 设置单元格的样式 */

th,td{

text-align: center;

padding:10px;

/* border-radius:10px; */

}

/* 设置表格圆角效果 */

table th:first-of-type{

border-top-left-radius: 10px;

}

table thead>tr:first-of-type>th:last-of-type{

border-top-right-radius: 10px;

}

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

border-bottom-left-radius: 10px;

}

table tfoot>tr:first-of-type>td:last-of-type{

border-bottom-right-radius: 10px;

}

/* 设置表格标题样式 */

table caption{

font-size: 1.2em;

font-weight: bolder;

margin-bottom: 20px;

}

table thead>tr:first-of-type{

background-color: lightblue;

}

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

background-color: wheat;

}

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

background-color: goldenrod;

}

table tfoot>tr:last-of-type{

background-color: lightgrey;

}

/* 为表格添加背景图片 */

table::before{

content: "";

width:800px;

height: 295px;

left: 0;

top:48px;

position: absolute;

background-image: url("../image/school.jpg");

opacity: 0.5;

background-size:cover;

border-radius: 10px;

}

运行实例 »

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

最终运行的一个效果图：

总结：

要想实现一个table表格带有四个圆角的效果，要将table标签的border-collapse的属性设置为separate,也是默认值，把border-spacing的值设为0，border-radius设置一个值，让后通过伪类选择器选中表格当中的四个角，设置一下圆角就实现了一个带有四个圆角效果的表格。