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

CSS制作一张带有四个圆角的表格实例

html>

课程表

table {

width: 800px;

/* border: 1px solid #000; */

/* border-collapse: collapse; */

margin: 50px auto;

position: relative;

}

th,

td {

border: 1px solid #000;

text-align: center;

padding: 10px;

}

table caption {

font-size: 1.6em;

font-weight: bold;

margin-bottom: 20px;

}

table thead>tr:first-of-type {

background-color: aqua;

}

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

background-color: bisque;

}

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

background-color: aliceblue;

}

table tfoot>tr:last-of-type {

background-color: ivory;

}

table:before {

content: '';

width: 800px;

height: 300px;

position: absolute;

left: 0;

top: 54px;

background-image: url(http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg);

background-size: cover;

opacity: 0.5;

border-radius: 12px;

}

table {

border-spacing: 0;

border-radius: 12px;

}

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

border-top-left-radius: 12px;

}

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

border-top-right-radius: 12px;

}

table tfoot tr {

border-bottom-left-radius: 12px;

}

table tfoot td:first-of-type {

border-bottom-left-radius: 12px;

}

table tfoot td:last-of-type {

border-bottom-right-radius: 12px;

}

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

上午
8:00-11:30语文数学数学外语语文数学数学语文美术外语美术语文美术体育数学下午
14:00-16:00外语外语外语语文美术体育美术外语语文体育备注：周未家长必须来学校帮助孩子打扫卫生

运行实例 »

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