css美化table的方法

html中原始的table很丑，以下是美化方法：

css：

table {text-align: center;
}table thead tr th {padding: 5px 20px;background-color: blue;font-weight: 400;color: #fff;
}table tbody tr td {padding: 5px 20px;border-top: 1px solid blue;
}table tbody tr:nth-child(2n) td {background-color: lightblue;
}table tbody tr:last-child td {border-bottom: 1px solid blue;
}

html：

<table border="0" cellspacing="0" cellpadding="0"><thead><tr><th>字段1</th><th>字段2</th><th>字段3</th></tr><thead><tbody><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr><tr><td>5-1</td><td>5-2</td><td>5-3</td></tr></tbody>
</table>

效果图：

参考资料：Element - The world's most popular Vue UI framework

css美化table的方法相关推荐

html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...
CSS美化滚动条的方法
给需要滚动的元素添加伪选择器,::-webkit-scrollbar{width:0;}, 将宽度设为0,滚动条就会隐藏. PS: 可以设置滚动条样式,使其美观. /*滚动条宽长,滚动条整体部分,其 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
html 美化table,纯CSS美化HTML的Table
今天发觉一个很好的表格CSS代码: http://veerle-v2.duoh.com/blog/comments/a_css_styled_table 整体的CSS代码: body { font: ...
php中使用表格美化显示数据,怎么利用layui美化table数据表格
首先我们来看下美化后的效果图: (学习视频分享:html视频教程) 具体步骤: 1.引入layui的css和js文件 2.在页面放置一个table元素 3.通过 table.render() 方法指定 ...
10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
CSS控制表格的方法
现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...
bootstrap-table为空_JS组件Bootstrap Table使用方法详解
最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时 ...
css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明该属性是一个简写属性,涵盖了所有其他列表样式属性. ...
js、css 实现table表头固定
1. js实现(个人项目用过,完全js实现) html: <div class='table-cont' id='table-cont'> <tab ...

css美化table的方法

css：

html：

效果图：

css美化table的方法相关推荐

最新文章

热门文章