html table奇偶行颜色设置 (CSS选择器)

最新推荐文章于 2024-03-13 15:52:15 发布
最新推荐文章于 2024-03-13 15:52:15 发布
阅读量1.1k 收藏 3
点赞数 
 
 
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
 
 
下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。
 
 
 
  
 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4         <style type="text/css"> 
 5             table{
 6                 height: 200px;
 7                 width:400px;
 8                 border:2px solid  green;
 9             }
10             
11             td{
12                 border:1px solid;
13             }
14             
15             tr:nth-child(2n){
16                 background:#00CCCC;
17             }
18             
19             tr td:nth-child(1){
20                 background:#FFCCCC;
21             }
22         </style>  
23     </head> 
24     <body>
25         <table>
26             <tr>
27                 <td>1</td> <td>2</td> <td>3</td>
28             </tr>
29             <tr>
30                 <td>1</td> <td>2</td> <td>3</td>
31             </tr>
32             <tr>
33                 <td>1</td> <td>2</td> <td>3</td>
34             </tr>
35             <tr>
36                 <td>1</td> <td>2</td> <td>3</td>
37             </tr>
38         </table>
39     </body>
40 </html>
 
 
 
 
效果:
 
 
 
 
可以参考:
 
 
http://www.w3school.com.cn/cssref/selector_nth-child.asp
 


                

        

        




    




            

                    
            

    

      

        

            

              
                
                  weixin_34258782
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
【css】原生table制作奇偶行不同背景色表格，取消td单元格自带单线

				
			

			

				

					Weiqian_的博客
				

				

					04-12
					
					1212
					
				

			

		

		

			
				
原生table制作奇偶行不同背景色的表格，取消td单元格自带单线等

			
		

	



                

              
                



	

		

			

				
					
jquery css 设置table的奇偶行背景色示例

				
			

			

				

					10-25
				

			

		

		

			
				
在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松地识别不同行的数据。本文将详细介绍如何使用...

			
		

	



                


  
              

                


	

		

			

				
					
antd中table表格奇偶行设置不同样式(颜色交替)

				
			

			

				

					天心天地生的博客
				

				

					08-06
					
					6179
					
				

			

		

		

			
				
前言
在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示


react中覆盖antd组件的样式

渲染时给奇偶行设置不同类名
利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式.
js文件TableChangeDom.js
/**
 * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名
 * */

import React from "react";
import { 

			
		

	





	

		

			

				
					
让el-table奇数行偶数行颜色不一样

					
最新发布

				
			

			

				

					fenfen5162的博客
				

				

					03-13
					
					880
					
				

			

		

		

			
				
让el-table奇数行偶数行颜色不一样

			
		

	



		

			
		



	

		

			

				
					
ant-design-vue vue2 a-table行间隔颜色控制，奇偶行颜色

				
			

			

				

					LlanyW的专栏
				

				

					11-04
					
					3455
					
				

			

		

		

			
				
a-table>要单独设置颜色实现需要css穿透方式实现，而且要指定特定class名字否则会影响所有table。如标题所说，table的行颜色一样不明显，需要行间隔颜色明显，逻辑是通过奇偶行数来单独设置颜色。这个是写在模版.vue文件最后 里面。

			
		

	





	

		

			

				
					
给antd中table表格奇偶行设置不同样式（背景颜色交替）

				
			

			

				

					Afterwade的博客
				

				

					12-29
					
					6166
					
				

			

		

		

			
				
今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。
如下图：

table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式
jsx代码：
import React, { Component } from 'react';
import {Layout,Select,Table} from 'antd'
import  './index.less'
const { Option } = Select;


			
		

	





	

		

			

				
					
jquery实现奇偶行赋值不同css值

				
			

			

				

					12-09
				

			

		

		

			
				
在网页设计中，为了提高可读性和视觉效果，经常需要为表格中的行设置不同的背景颜色。这可以通过CSS（层叠样式表）实现，但当涉及到动态效果或响应式设计时，JavaScript库如jQuery就能派上用场。在这个场景中，我们...

			
		

	





	

		

			

				
					
CSS.table.rar_Table_css table_table css_表格css

				
			

			

				

					09-20
				

			

		

		

			
				
2. **CSS选择器**：  - `.class`：类选择器，用于选择具有特定类名的元素。  - `#id`：ID选择器，用于选择具有特定ID的唯一元素。  - `element`：元素选择器，选择特定类型的HTML元素。  - `:nth-child(n)`：伪类...

			
		

	





	

		

			

				
					
jQuery实现表格奇偶行显示不同背景色 就这么简单

				
			

			

				

					01-21
				

			

		

		

			
				
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示：  <html> <style type=text/...

			
		

	





	

		

			

				
					
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白

				
			

			

				

					编程界明世隐的博客
				

				

					12-10
					
					4496
					
				

			

		

		

			
				
最主要就是用到属性的绑定 :class


<!DOCTYPE html>
<html>
    <head>
        <meta charset="GBK">
        <title></title>
        <style>
        	* {
		        margin: 0px;
		        padding: 0px;
			}
        	body {
		     .

			
		

	





	

		

			

				
					
table 设置奇偶行颜色不一样

				
			

			

				

					weixin_46600931的博客
				

				

					09-15
					
					801
					
				

			

		

		

			
				
项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分。

			
		

	





	

		

			

				
					
el-popover 点击input框出现table表，可点击选中，可拼音检索完回车选中

				
			

			

				

					weixin_30858241的博客
				

				

					06-04
					
					690
					
				

			

		

		

			
				
<template>
<card>
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-table
ref="singleTable"
:data="pinyinOptions"
highlight-current-row
style="width: 10...

			
		

	





	

		

			

				
					
CSS：设置表格奇偶行不同样式

				
			

			

				

					weixin_46585382的博客
				

				

					04-07
					
					2007
					
				

			

		

		

			
				
CSS：设置表格奇偶行不同样式

			
		

	





	

		

			

				
					
:nth-child(n)

				
			

			

				

					lxw1844912514的博客
				

				

					04-28
					
					376
					
				

			

		

		

			
				
规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2)
{
background:#ff0000;
}

1定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
该选择器选取父元素的第 N 个子元素，与类型无关。
2
:nth-of-type() 选择器，该选择器选取父元素的...

			
		

	





	

		

			

				
					
表格奇偶行颜色不同html

				
			

			

				

					丁七岁的博客
				

				

					09-16
					
					2898
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>表格奇偶行颜色不同html</title>
        <style type="text/css">
            table {
                width: 60%;
                margin

			
		

	





	

		

			

				
					
点击表格列变色，让表格的偶数排变色，点击表格的行让其变色

				
			

			

				

					看见小狮子没
				

				

					07-14
					
					866
					
				

			

		

		

			
				
点击任意一个单元格，会自动使该单元格所在位置的一竖列单元格变红。CSS、HTML代码一致。CSS、HTML代码如上。

			
		

	





	

		

			

				
					
Web前端实验4

				
			

			

				

					qq_53745727的博客
				

				

					04-23
					
					366
					
				

			

		

		

			
				
<a href="…" target="_blank">查看</a>

			
		

	





	

		

			

				
					
table隔行换色

				
			

			

				

					dly120219891208的专栏
				

				

					07-09
					
					626
					
				

			

		

		

			
				
table让奇数行显示灰色背景，偶数行显示绿色背景。

			
		

	





	

		

			

				
					
HTML中设置table标签行列背景颜色

					
热门推荐

				
			

			

				

					Small_Pang的博客
				

				

					09-23
					
					1万+
					
				

			

		

		

			
				
HTML中设置table标签行列背景颜色

在css选择器中进行设置：


使用tr:nth-child(5n)可以自己设置每隔多少行设置一种颜色。
也可以使用tr:odd{ }设置奇数行，tr:even{}设置偶数行

<style>
        tr:nth-child(5n){
            background-color: #ff94e2;
        }
...

			
		

	





	

		

			

				
					
css Table奇数行颜色设置

				
			

			

				

					07-12
				

			

		

		

			
				
要设置 CSS 表格的奇数行颜色，你可以使用 `:nth-child` 选择器来选择奇数行，并为其设置背景颜色。下面是一个示例：  ```html  table {  width: 100%;  border-collapse: collapse; }  tr:nth-child(odd) {  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值