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

实例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <link rel="stylesheet" href="style.css" /> 
  <title>css控制表格的样式</title> 
 </head> 
 <body> 
    <table > 
	<caption>课程表</caption>
     <thead>
      <tr> 
       <th></th> 
       <th>星期一</th> 
       <th>星期二</th> 
       <th>星期三</th> 
       <th>星期四</th> 
       <th>星期五</th> 
      </tr>
	 </thead>
	  <tbody>
      <tr> 
       <td rowspan="4">上午<br>8:00 - 8:45</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>语文</td> 
       <td>化学</td> 
       <td>物理</td> 
       <td>英语</td> 
       <td>数学</td> 
      </tr> 
      <tr> 
      <td rowspan="3">下午<br>14:30 - 17:00</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> 
	  </tbody>
	  
	  <tfoot>
      <tr> 
       <td>备注</td> 
       <td colspan="5">晚自习</td> 
      </tr> 
     </tfoot>
    </table>  
 </body>
</html>

运行实例 »

实例

table{
	 width:800px;
	 border-collapse: separate;
	 border-spacing: 0;
	 border-radius: 30px;
	 border:1px solid #F08080;
	 box-shadow:2px 2px 2px #888888;
	 margin:0 auto;
}



table:before{
	content:'';
	width:800px;
	height:225px;
	position:absolute;
	left:170px;
	top:35px;	
	/*设置伪元素背景*/
	background-image:url("timg.jpg");
	background-size:cover;
	opacity:0.3;
	border-radius: 30px;
	
}

table caption{
	font-size:1.3rem;
	font-Weight:bolder;
}

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

tbody{
	align:center;
}

tfoot{
	align:center;
}

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

table thead>tr:first-of-type>th:first-of-type{
	
	border-top:none;
	border-left:none;
}

table thead>tr:first-of-type>th:last-of-type{	
	border-top:none;
	border-right:none;
}

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

table tbody>tr:nth-last-of-type(3)>td:first-of-type{
	background-color:wheat;
}

table tfoot>tr:last-of-type{
	
}

table tfoot>tr:last-of-type>td:first-of-type{
	border-bottom:none;
	border-left:none;
}

table tfoot>tr:last-of-type>td:last-of-type{
	border-bottom:none;
	border-right:none;
}

运行实例 »

总结：1.在table和table:before用border-radius可以使四个角变为圆角，但是左上下角和右上下角的th,td依旧有边框。

2.利用选择器定位到四个角的th或td，再利用border-left，border-right，border-top，border-bottom设置为none 分别可以将，左，右，上，下的边框设为空。

实例

实例

相关文章