如何给表格的某一列写css效果？最简单方法在这里！

最新推荐文章于 2022-12-22 14:33:02 发布

像我一样菜的人

最新推荐文章于 2022-12-22 14:33:02 发布

阅读量498

点赞数

分类专栏：前端工作问题整理文章标签： 1024程序员节 html javascript css3

本文链接：https://blog.csdn.net/qq_43842918/article/details/109261280

版权

前端工作问题整理专栏收录该内容

22 篇文章 1 订阅

订阅专栏

如何给表格的某一列写css效果？

——工作中遇到的问题：需要给antd的Table表格第二列增加hover效果

试过了一些方法后，发现最简单的方法是：

td:first-child 表示第一列
td:first-child + td 表示第二列
td:first-child + td + td 表示第三列

以此类推，简单明了。

在这里插入图片描述
如上图代表第二列有hover效果，如此只要能找到某个td，就能找到那一列了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

像我一样菜的人

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS入门？一篇就够了！

xj-up的博客

03-20

9515

CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入C...

根据表格中的某一列进行排序的javascript代码

10-26

本文将通过一个具体的实例，来说明如何使用JavaScript对网页中的表格根据某一列的数据进行升序或降序排序。首先，让我们来理解代码中涉及的关键概念和技术点。 ### JavaScript数组排序在代码中，首先会创建一个...

参与评论您还未登录，请先登录后发表或查看评论

CSS改变表格某一列效果的方法

lanyanxuan的博客

03-25

2836

CSS对表格的行操作时只需对相应行标签<tr>加入class属性或id属性就行，反观列就不能使用这样快捷的方法，如果有对某个同列的单元格都加入class属性或id属性会让程序显得繁琐。 CSS有一个选择器：:nth-child(n) 这个选择器的作用是选择器选择属于其父元素的第 N 个子元素，不论元素的类型。例如：p:nth-child(2)就是选中了第二段文字。 <div> 第一段文字 第二段文字 &l

html中怎么指定某一列,请问如何在CSS网格布局中定位特定的列或行？

weixin_35214794的博客

06-18

395

要设置任意行的样式，可以使用display设置为的包装元素contents。请参阅下面的代码段：.grid-container{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:2px;}.grid-item{border:1pxsolidblack;padding:5px;}.grid-row-wrapper...

在table中给指定列td添加css

翎墨袅

03-24

1341

#bootstrap-table td:nth-child(6){ width : 500px; } 给id为bootstrap-table下的第6列td添加css width : 500px;

CSS选择器nth-child()、first-child()、last-child()、not()

最新发布

m0_46318298的博客

12-22

5021

CSS选择器nth-child()、first-child()、last-child()、not()

td:first-child 伪类匹配第一个匹配第一个 <td> 元素

weixin_34119545的博客

06-22

1259

css代码： td:first-child{border-right: 1px solid #d9dbdd; } 备注：在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：链接：http://www.w3cschool.cn/tdae7.html?f=csse_first-child_1 ...

HTML表格固定第一行第一列效果

11-06

为了解决这个问题，我们可以实现一个类似于Excel的功能，即在滚动时固定表格的第一行和第一列，使得在浏览大量数据时，关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。首先，我们需要创建一个基本...

纯CSS实现的三列布局网页效果实例

09-25

- **纯CSS实现三列布局**：在网页设计中，三列布局是一种常见的页面布局方式，它使用CSS样式来创建三个并行的列，通常包含左侧或右侧的一个固定宽度列（侧边栏），中间的主内容区以及右侧另一个固定宽度列或侧边栏。...

学习DIV+CSS网页布局之一列布局

09-24

【标题】: "深入理解CSS布局：一列布局解析与应用" 【描述】: "本文旨在探讨CSS布局中的一列布局技术，通过实例解析如何利用DIV+CSS实现单列网页设计，适合初学者及需要进阶理解网页布局的开发者参考。" 在网页...

【DOM】了解HTML DOM常用对象: 对常用元素的简化操作_05

青春木鱼的博客

05-23

634

HTML DOM常用对象:——对常用元素的简化操作（了解即可）。唯一的简化，就是创建img元素时，常用的DOM元素中，只有img元素能用new Image()创建。其余元素都只能用document.createElement()创建。

CSS 笔记

ablmnuk的博客

04-17

246

CSS 笔记一、css简介 1.什么是css css：cascading style sheet 层叠样式表是一组样式设置规则，用于控制页面的外观样式 2.为什么使用css 实现内容与样式的分离，便于团队开发样式复用，便于网站的后期维护页面的精确控制，让页面更精美 3.css作用页面外观美化布局和定位二、基本用法 1.css语法 <head> <st...

css 获取table 的第几列

xuerwang的博客

08-23

7662

需求：将table列表中的第二列宽度设为300px。说明：利用ntn-child(n)选择器进行实现。其中n代表选择元素中的第几个元素，第几个就写几，特殊的，要选中第一个可以写为： first-child ，要选中最后一个可写为，last-child，要选择偶数个，可写为nth-child(2n)，同理，奇数列可写为nth-child(2n+1)，这不仅适用于table的列，也适合于所有选中...

如何匹配table的第一列td？

极光之域的博客

01-26

1164

如何匹配table的第一列td？目标效果：实现方案： :first-child匹配所有在自身所属的父容器(tr)中排第一的 td：$('td:first-child') $('td:nth-child(1)') // 当然 :nth-child(1) 也可以失败方案： :eq(0)不可以！…？$('td:eq(0)') /* 从所有匹配到的 td 中获取第一个(下标为0) 所以，只匹配了第一行的第一个td 同理，:eq(3)是第二行第一个，:eq(6)

jquery给表格某一列添加css样式

L221545的博客

04-10

1486

1、给table某一列动态添加class <td>${projects.proAudit}</td> $ ('table tr td #status').each (function () { var status=$(this).html(); if (status=="审批通过"){$(this).addCla

css 列宽控制,CSS 控制table 滑动及调整列宽等问题总结

weixin_42471823的博客

08-04

3961

本文介绍了通过css+js来控制table的x,y方向上的滚动。然后详细分析了使用table时，可能出现的width宽度与预期设定不一致的情况，最后给出了解决方案效果图三. 表格宽度上面两段代码是在table的设置上是有差异的：第二个例子的css 样式table.item将table-layout:fixed去除掉了。因为如果不去除掉。显示效果是下面这样的上面表头的table宽度设置无效了。可以看...

CSS: :last-child 与 :first-child的坑