表格的运用（复习）-2019年09月06日

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

实例

		<style type="text/css">
			table {
				border: 1px solid #444;
				border-collapse: collapse;
				width: 800px;
				margin: 50px auto;
				box-shadow: 2px 4px 4px #8888;
				position: relative;
				border-spacing: 0;
			}

			th,
			td {
				border: 1px solid #444;
				text-align: center;
				padding: 12px;
			}

			table caption {
				font-size: 1.3rem;
				font-weight: bold;
				margin-bottom: 15px;
			}

			table thead>tr:first-of-type {
				background: #90EE90;
			}

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

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

			table tfoot>tr:last-of-type {
				background: #CCCCCC;
			}


			table:before {
				content: '';
				width: 800px;
				height: 320px;
				position: absolute;
				left: 0;
				top: 42px;
				background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/71110/6/4596/92259/5d2c58c7Ea7a8cffd/897a0cb49d6b4c95.jpg);
				background-size: cover;
				opacity: 0.3;
				border-radius: 25px;
			}

			table thead tr:first-child th:first-child {
				border-top-left-radius: 25px;
			}

			table thead tr:first-child th:last-child {
				border-top-right-radius: 25px;
			}

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

			table tfoot tr:last-child td:last-child {
				border-bottom-right-radius: 25px;
			}
		</style>





<table>
			<caption>幼儿食堂安排表</caption>
			<thead>
				<tr>
					<th>星期</th>
					<th>星期一</th>
					<th>星期二</th>
					<th>星期三</th>
					<th>星期四</th>
					<th>星期五</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td rowspan="3">上午</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">下午</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>
				</tr>
			</tfoot>

		</table>