表格（table）隔行换色

最新推荐文章于 2021-08-24 22:55:33 发布
原创 最新推荐文章于 2021-08-24 22:55:33 发布 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这段HTML代码展示了如何使用CSS实现表格（table）的隔行换色效果。通过设置`table tr:nth-child(even)`选择器的背景色，使得表格的偶数行呈现出不同的颜色，增强视觉效果。
<!DOCTYPE html>


<html>


<head>


    <meta charset="UTF-8">


    <title></title>


    <style>
        table, tr, td, th {
            padding: 0;
            margin: 0;
            border-bottom: solid 1px #d9ebf3;
          border-collapse: collapse;  
        }


        table {
            width: 100%;
            border-color: #ccc;
              border: solid 1px #cbcbcb;
        }


            table tr {
                line-height: 30px;
                border-color: #ccc;
            }


            table th {
                text-align: center;
               
                background-color:cornflowerblue
            }


            table tr:nth-child(even) {
                background: #ccc;
            }
    </style>


</head>
<body>


    <table >


        <tr>


            <th>1</th>


            <th>2</th>


            <th>3</th>


        </tr>


        <tr>


            <td>1-1</td>


            <td>1-2</td>


            <td>1-3</td>


        </tr>


        <tr>


            <td>1-1</td>


            <td>1-2</td>


            <td>1-3</td>


        </tr>


        <tr>


            <td>1-1</td>


            <td>1-2</td>


            <td>1-3</td>


        </tr>


        <tr>


            <td>1-1</td>


            <td>1-2</td>


            <td>1-3</td>


        </tr>


    </table>


</body>


</html>
el-table合并单元格之后，再进行隔行换色的实现
sinat_33255495的博客
06-18 1300
el-table 中有现成的隔行换色功能，只要增加 stripe 属性即可。但是如果有单元格合并的话，这个属性就不可用了。这时候我们就需要动点小心思了。
table 隔行换色
iteye_10812的博客
08-16 221
一直没注意table的隔行换色，突然要调试一个隔行换色，于是。 function table_even_odd(){ $("#showcss table tr:odd").css("background-color","#fbfbfb"); $("#showcss table tr:even").css("background-color","#ffffff");
基于JavaScript实现表格隔行换色
11-21
表格隔行换色 需求分析 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 技术分析 table对象 集合 cells[]：返回包含表格中所有单元格的一个数组。 rows[]：返回包含表格中所有行的一个数组。 tBodies[]：返回包含表格中所有tbody 的一个数组。 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 代码实现 <!DOCTYPE html> <html lang="en">
table隔行换色
dly120219891208的专栏
07-09 710
table让奇数行显示灰色背景，偶数行显示绿色背景。
table表格隔行换色
he19951124的博客
07-01 444
<%-- 表格隔行换色--%> 1. <style> table tr:nth-child(even){ background : #F4F4F4 ;} table tr:nth-child(odd){ background : #73B1E0 ;} </style> 2. // $("tr:odd").css("background-color","gray") 隔行换色
表格table隔行换色以及点击整行变色.rar
12-29
本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果，这两种技术可以提升用户体验，使表格内容更加清晰易读。 首先，让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果，因为它使得交替的行...
IE8 chrome中table隔行换色解决办法
10-29
本文将详细介绍如何在IE8及Chrome中解决table隔行换色的问题。 首先，我们来看IE8以上版本的解决方案。在这些较新的浏览器中，CSS3的特性通常能得到较好的支持。一个简单的CSS方法可以实现隔行换色，无需JavaScript...
jquery实现表格隔行换色效果
10-23
在Web开发中，实现表格隔行换色是一个常见的页面美化功能，它不仅能够提高表格数据的可读性，还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...
基于Jquery的表格隔行换色，移动换色，点击换色插件
12-02
在本文中，我们将深入探讨基于Jquery的表格隔行换色、移动换色以及点击换色的实现方式，这涉及到Jquery插件的编写和应用。Jquery是一种强大的JavaScript库，它简化了DOM操作，事件处理，动画效果，以及Ajax交互，而...
隔行换色table
day81219的博客
10-29 179
<style type="text/css"> table { margin: 0 auto; width: 600px; } table { border: 1px solid #000; } table tr...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
刘贵庆的博客
08-24 4963
抽出时间整理笔记：table头部固定、超出宽度可横向移动，主信息隔行换色、鼠标移动变色。举例： code : <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Table表头固定</title> <style> #div { .
CSS之Table表格隔行换色之简洁版
netuser1937的博客
02-07 2978
CSS之Table表格隔行换色之简洁版
实现table、列表隔行换色
weixin_34021089的博客
04-16 534
2019独角兽企业重金招聘Python工程师标准>>> ...
Table隔行变色
weixin_30469895的博客
10-14 302
1.用JavaScript实现隔行变色 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.g...
table隔行变色
雨果的博客
06-13 1789
tr:nth-child(2n){ background-color: #A9C7E1; } nth-child选取其父元素的第 N 个子元素，2n即为偶数行，设置颜色。 参数也可以是别的，例如odd 和 even 是可用于匹配下标是奇数或偶数，3n，4n等. 如果这个不好用，还有下边这个， nth-of-type选择器匹配属于父元素的特定类型的第 N 个子元素。 tr:nth-of-t...
table 表格隔行换色实现
weixin_30725467的博客
04-21 144
table 表格隔行换色实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <...
实现表格隔行换色与点击变色的简洁方法
该文件标题指向了一个典型前端开发领域的知识点，即在Web页面中实现表格数据的隔行换色以及点击某行后使整行变色的功能。这通常涉及HTML、CSS和JavaScript三种技术的结合使用。下面将详细介绍这些知识点。 ### 表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值