css3表格练习

1.效果图

2.html

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

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;
}
相关推荐
Mikey_n28 分钟前
前台调用接口的方式及速率对比
前端
周之鸥34 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉39 分钟前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导1 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow1 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷1 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog1 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella25211 小时前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川1 小时前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库