本文介绍: 【代码】css3表格练习。
1.效果图
2.html
<div class="line">
</div>
<h3>获奖名单</h3>
<!-- 表格 cellspacing内边距 cellpadding外边距-->
<table cellspacing="0" cellpadding="0" >
<!-- thead表头 -->
<thead>
<tr>
<td>中奖用户</td>
<td>PR排名</td>
<td>具体奖品</td>
</tr>
</thead>
<!-- tbody表体 -->
<tbody>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
<tr>
<td>王振民</td>
<td>1</td>
<td>
<div>一年学费+</div>
<div class="warp">特别礼品</div>
</td>
</tr>
</tbody>
<!-- tfoot表尾 -->
<tfoot>
<!-- <tr>
<td>总计</td>
<td colspan="2">共100名</td>
</tr> -->
</tfoot>
</table>
3.css
*{
padding: 0;
margin: 0;
list-style-type: none;
}
.line{
width: 330px;
height: 1px;
border-top: 1px solid #7ef805;
margin: 0 auto;
margin-top: 50px;
}
h3{
width: 100px;
text-align: center;
/* 关键点,利用定位让文字居中 */
position: relative;
margin: 0 auto;
bottom: 14px;
background-color: white;
color: #7ef805;
}
table{
width: 330px;
/* margin: 0 auto;居中 */
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
table tr td{
/* width: 10%; */
height: 50px;
}
/* 去除表格四周边框 */
table td{
border: 1px solid blue;
/* 上边框和左边框为0 */
border-top: 0;
border-left: 0;
}
table td:nth-child(3){
border-right: 0;
}
/* 站在父元素的角度上选择最后一个子元素 */
table tbody tr:last-child td{
border-bottom: 0;
}
thead{
background-color: #7ef805;
color: white;
}
.warp{
/* font-size: 10px; */
font-weight: bolder;
}
/* 隔行变色 */
tbody tr:nth-child(odd){
background-color: #7ef805;
}
tbody tr:nth-child(even){
background-color: red;
}
tbody tr{
border: 1px solid red;
}
原文地址:https://blog.csdn.net/m0_72929120/article/details/135867281
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_63785.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。