使用伪类选择器实现表格

最新推荐文章于 2021-06-03 18:58:57 发布
最新推荐文章于 2021-06-03 18:58:57 发布
阅读量312 收藏
点赞数
原文链接：http://www.cnblogs.com/lyl-0667/p/10965815.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <style>
     table caption{
         font-size: 28px;
         font-weight: bold;
         margin:20px 0;
     }
     table{
         width: 100%;
         text-align: center; 
         border-collapse: collapse;
     }
      td,th{
        border: 1px solid #e6e6e6;
        height: 50px;
     }
     table thead{
         background: #49638c;font-weight: bold;color: white
     }
     table th:nth-child(1),td:nth-child(1){
         width: 10%;
     }
     table th:nth-child(2),td:nth-child(2){
         width: 20%;
     }
     table th:nth-child(3),td:nth-child(3){
         width: 30%;
     }
     table th:nth-child(4),td:nth-child(4){
         width: 20%;
     }
     table th:nth-child(5),td:nth-child(5){
         width: 20%;
     }
     table tbody tr:nth-child(2n-1){
         background: #ececec;
     }
     table tbody tr:nth-child(2n){
         color: #7e939e;
     }
     table tbody tr:nth-child(2n-1){
         color: #775a5a;
     }
     table tbody tr:hover{
        background: #c7c2f5;
     }
     table tfoot{
         background: #49638c;
         font-weight: bold;
         color: white;
         text-align: right;
     }


    </style>
</head>
<body>
  <table>
      <caption>某某某数据</caption>
      <thead>
          <tr>
            <th>数据1</th>
            <th>数据2</th>
            <th>数据3</th>
            <th>数据4</th>
            <th>数据5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
        </tr>
        <tfoot>
        <tr>
　　　　　　　　　　/*clspan为合并行*/

                <td colspan="4">表尾统计1</td>
                <td>数据2</td>
                <!-- <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td> -->
        </tr>
        <tr>
                <td colspan="4">表尾统计1</td>
                <td>数据2</td>
                <!-- <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td> -->
        </tr>
        </tfoot>
      </tbody>
  </table>
</body>
</html>

转载于:https://www.cnblogs.com/lyl-0667/p/10965815.html

weixin_30878501
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
伪类选择器在表格中的应用
ssh6666的博客
03-18 337
伪类选择器在表格中的应用 <body> <table> <tr> <td>1</td> <td>11</td> <td>12</td> </tr> <tr> <t...
利用CSS3的伪类画表格
RunningSnail
02-22 1463
css3 伪类分为：动作伪类、目标伪类、语言伪类、结构伪类、UI元素状态伪类、否定伪类选择器。通过这些伪类选择器，可以实现很多原来需要js才能实现的功能。现在我们来用这些伪类选择器来制作表格。 表格1： 表格2 div.demo{ width:600px; margin:30px auto; font-size:14px; font-family: "微
伪类选择器表格的制作二
等待のL先森的博客
12-01 151
伪类选择器表格的制作二 如图所示： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器表格的制作</title> <style&
创建一个表格，使用类选择器来美化表格样式？
XXLoveSHT的博客
06-19 683
创建一个表格，使用类选择器来美化表格样式：代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;创建一个表格，使用类选择器美化&lt;/title&gt; &lt;/head&gt; &lt;style&gt;
使用 CSS3 中的伪类渲染表格
weixin_30776863的博客
04-18 199
　　CSS 中的伪类（pesudo class）是一种通过文档外信息或通过常规元素选择器无法表达的信息查找页面元素的方法。您可能已经使用过伪类，比如使用：hover 来改变鼠标悬停在超链接上时链接的颜色。使用 CSS3 中新的伪类可以更轻松地定位页面元素。 概述 在 Web 开发过程中，开发人员经常会通过使用 CSS 来实现页面所需的样式效果。例如：利用服务器端代码或 JavaScript 脚...
CSS3伪类选择器：nth-child()
09-27
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地控制页面元素的样式。这个选择器基于元素在父元素中的相对位置，而非基于元素自身的特性。在CSS3中，`:nth-child()`允许我们选择特定...
使用JQ完成表格隔行换色的简单实例
12-02
`:even`和`:odd`是伪类选择器，它们分别代表索引为偶数和奇数的元素。 4. **应用CSS样式**：选取到相应的行后，通过`.css(name, value)`方法来改变行的背景颜色。如`css("background-color", "gold")`用于设置背景...
详解css常用选择器
09-27
- 还有更多伪类选择器，如`:hover`, `:active`, `:focus`, `:target`, `:checked`等，用于响应用户交互或元素状态。 12. **计数器和伪元素配合**：CSS计数器可用于动态创建多级编号，`::before`和`::after`伪元素...
Lesson03_02 样式规则选择器
10-31
类选择器还可以与伪元素结合使用，例如`div.error::before`可以为所有具有`error`类的`div`元素添加一个前导图标。 总的来说，了解并熟练运用这些样式规则选择器是创建有效且可维护的CSS代码的关键，它们使我们能够...
实现表格的隔行变色
11-13
为确保跨浏览器兼容性，可以使用类选择器配合JavaScript来实现。例如： ```html <tr class="even"></tr> <tr class="odd"></tr> <!-- ... --> .even { background-color: #f2f2f2; } .odd { background-...
用CSS伪类选择器做一个爱心
巧克力很苦的小博客
02-25 323
用CSS伪类选择器做一个爱心 这里我们会用到 position：relative；相对定位 position：absolute;绝对定位 border-radius；圆角属性 transform；变换属性 :after :before；伪类选择器 效果图 接下来直接上源代码 HTML &lt;body&gt; &lt;div&gt;&lt;/div&gt; &...
结构伪类选择器（二）
weixin_34128839的博客
05-08 99
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
doudoutj的博客
02-26 203
推荐书籍：码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按：ctrl +alt+L快捷键 注释快捷键：ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red;
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
t1753867136的博客
05-17 5105
原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.htmlCSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSe...
CSS表格及表单美化
Super_Robot的博客
06-09 8499
CSS表格及表单美化 有效的传递页面信息 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span> 标签的作用 能让某几个文字或者某个词语凸显出来 <span>字体</span> <p>凸显<span class="show">“字体”&l...
html表格伪类选择器,HTML表单及CSS选择器、伪类和伪元素
weixin_30514003的博客
06-03 277
一、input标签1.实现按钮效果-与表单相关的按钮效果-2.标签表示按钮-与表单无关的按钮效果：按钮-类似于 - 提交表单3.-基本用法 - 也可以显示图片-鼠标点击图片时 - 也有提交表单的作用不同于(只是图片)二、基本选择器1.选择器的优先级别通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器2.元素选择器 - 定位当前页面的指定标签名ID选择器 - 定...
使用CSS样式对表格进行美化并对伪类的使用进行解析
starjuly的专栏
07-09 1079
通过使用html的表格展示新用户注册的页面，并使用CSS样式来改变其外观，使其更好看；伪类的使用：link是定义初始时的颜色，visited是定义点击后的颜色， hover是定义选中时的状态并出现下划线，text-decoration：定义下划线是否存在。
HTML5系列代码中，使用伪类选择符设计表格可以通过CSS的：nth-child()和：nth-of-type()等伪类选择符来实现
BLOG域名:programb.blog.csdn.net
06-29 279
HTML5系列代码中，使用伪类选择符设计表格可以通过CSS的：nth-child()和：nth-of-type()等伪类选择符来实现。这些伪类选择符可以帮助我们根据表格的行或列的位置来设置样式。在这个例子中，我们使用了：nth-child(even)伪类选择符来为表格的偶数行设置了灰色背景。同样，我们也可以使用：nth-child(odd)伪类选择符来为奇数行设置不同的背景颜色。
伪类选择器简单总结
fantasy_Go的博客
07-11 981
伪类选择器 在CSS中有众多选择器，其中伪类选择器是比较让人头疼，同时亦让人弄混的选择器，本篇博客主要对常用的伪类选择器进行简单的总结。 什么是伪类？ CSS伪类用于向某些选择器添加特殊的效果。 它的语法结构为： selector : pseudo-class { property: value } 下面是几个常用的伪类选择器介绍 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值