html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码

今天准备美化下作的一个小页面的样式，这个页面就是一个表格，调取报名信息的，例如「姓名」「联系方式」「时间」，就单独一个页面，不想再使用复杂的插件来实践，就准备用纯CSS来定一下样式。

检索了下，在「蝈蝈要安静」的博客上看到了这个样式，使用一下，感觉挺好，就记录一下。

首先上下效果图：

CSS 代码/** Table 表格样式 **/

.qgg-table{

border-collapse: collapse;

width:100%;

border:1px solid #c6c6c6 !important;

margin-bottom:20px;

}

.qgg-table th{

border-collapse: collapse;

border-right:1px solid #c6c6c6 !important;

border-bottom:1px solid #c6c6c6 !important;

background-color:#ddeeff !important;

padding:5px 9px;

font-size:14px;

font-weight:normal;

text-align:center;

}

.qgg-table td{

border-collapse: collapse;

border-right:1px solid #c6c6c6 !important;

border-bottom:1px solid #c6c6c6 !important;

padding:5px 9px;

font-size:12px;

font-weight:normal;

text-align:center;

word-break: break-all;

}

.qgg-table tr:nth-child(odd){

background-color:#fff !important;

}

.qgg-table tr:nth-child(even){

background-color: #f8f8f8 !important;

}

table代码

报名表单

姓名电话时间

测试138888888882020-05-16 13:04测试138777777772020-05-16 13:03测试138666666662020-05-16 13:02测试138555555552020-05-16 13:01

html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码相关推荐

【css】纯css实现table表格固定表头，表内容滚动
今天在写公司项目的时候,遇到了一个比较xx的问题,现公司的项目使用的是 vue2.0 和 element-ui 搭建的. 那么提到 element-ui 大家都知道,他最实用的一个组件就是表格了,简直 ...
css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
变化多端 – 多种纯CSS的HTML表格设计
原文地址为: 变化多端 – 多种纯CSS的HTML表格设计介绍在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之.但在实际项目开发中,一碰到规 ...
纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
vue极简代码实现自定义可编辑行及操作按钮的Table表格组件（含源码及演示视频）
效果图如下: 涉及到技术点包括: 父组件给子组件传值props.动态赋值 refs 对DOM进行操作,slot具名插槽的使用,插槽通过slot-scope给父组件传值父组件代码: <templ ...
将表格转换成纯html,HTML table表格转换为Markdown table表格
举个栗子,当我想要把这个页面的第一个表格转换成Markdown Table时,怎么做更快,效率更高? 只需简单三步,请看示例: 第一步:复制包含HTML table标签的代码复制table代码(HT ...
html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...

html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码

报名表单

html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码相关推荐

最新文章

热门文章