table隔行变色的css

最新推荐文章于 2024-06-18 18:13:04 发布
最新推荐文章于 2024-06-18 18:13:04 发布
阅读量1.9k 收藏
点赞数
分类专栏： css


https://blog.csdn.net/semizhou/article/details/19902077


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="GBK" />
  5. <title>Css3实现表格隔行变色或隔列变色 </title>
  6. <style>
  8. .tableStyle {
  9. border-collapse:collapse;
  10. border-spacing: 0;
  11. }
  13. .tableStyle tr {
  14. background-color: expression((this.rowIndex % 2 == 0) ? "#F4F4F4" : "#FFF" );
  15. }
  17. .tableStyle tr :hover {
  18. background: #73B1E0;
  19. color: #FFF;
  20. }
  22. .tableStyle td {
  23. border: 1px solid #EEE;
  24. }
  26. .tableStyle th {
  27. border: 1px solid #EEE;
  28. background: #0090D7; font-weight:normal; line-height: 30px; font-size: 14px; color: #FFF;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <table class="tableStyle">
  34. <tr>
  35. <th>xHTML+CSS </th>
  36. <th>HTML5+CSS3 </th>
  37. <th>Javascript </th>
  38. <th>jQurey </th>
  39. </tr>
  40. <tr>
  41. <td>xHTML+CSS </td>
  42. <td>HTML5+CSS3 </td>
  43. <td>Javascript </td>
  44. <td>jQurey </td>
  45. </tr>
  46. <tr>
  47. <td>xHTML+CSS </td>
  48. <td>HTML5+CSS3 </td>
  49. <td>Javascript </td>
  50. <td>jQurey </td>
  51. </tr>
  52. <tr>
  53. <td>xHTML+CSS </td>
  54. <td>HTML5+CSS3 </td>
  55. <td>Javascript </td>
  56. <td>jQurey </td>
  57. </tr>
  58. <tr>
  59. <td>xHTML+CSS </td>
  60. <td>HTML5+CSS3 </td>
  61. <td>Javascript </td>
  62. <td>jQurey </td>
  63. </tr>
  64. <tr>
  65. <td>xHTML+CSS </td>
  66. <td>HTML5+CSS3 </td>
  67. <td>Javascript </td>
  68. <td>jQurey </td>
  69. </tr>
  70. <tr>
  71. <td>xHTML+CSS </td>
  72. <td>HTML5+CSS3 </td>
  73. <td>Javascript </td>
  74. <td>jQurey </td>
  75. </tr>
  76. </table>
  77. </body>
  78. </html>

简单的绿竹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现表格奇偶行变色
weixin_43535265的博客
03-05 3301
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ta{ border-collapse: collapse; border-color: blue; width: 100%; } tr:nth-child(odd){ background-c
纯css表格table隔行显示不同颜色
baidu_20876831的博客
06-07 9513
方法/步骤1制作简单表格，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;table,tr,td,th{padding: 0;margin: 0;}table{width: 100%;bord
css美化表格让其隔行变色显示
01-19
在html中常常需要从数据库中获取数据然后显示到浏览器上，显示的方式一般是用表格。单一的表格很容易使人感到枯燥，使用变色效果可以使得表格看起来更加舒适。实现方法如下 复制代码代码如下: /*css*/ /*表格修饰*/ .tablelist{ border:1px solid #0058a3; font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif; border-collapse:collapse; border-spacing:1pt; background-color:#eaf5ff; font-size:13px } .tab
CSS表格隔行变色
ddf__的博客
01-09 354
【代码】CSS表格隔行变色。
el-table合并单元格之后，再进行隔行换色的实现
sinat_33255495的博客
06-18 614
el-table 中有现成的隔行换色功能，只要增加 stripe 属性即可。但是如果有单元格合并的话，这个属性就不可用了。这时候我们就需要动点小心思了。
table和tr设置样式
热门推荐
......
02-15 3万+
table和tr设置样式，和平常的style和class有些许差别。 1、table 样式设置方法有: (1) (2) 这样的设置的cellspacing，宽度是(1)方法中的2倍宽 (3)css: .table{width:400px;height:300px;background-color:green;border:0;cellspacing:1px;} 这样的设置的cellspac
【HTML+CSS+JS】前台简单功能之====表格效果（隔行变色）
Lydia233的博客
07-30 249
【HTML+CSS+JS】前台简单功能之====表格效果（隔行变色） 界面效果如下： 代码如下： changeColor.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script type="text/javascript" src="../js/changeColor
CSS+JS实现table隔行变色
05-24
在网页设计中，为了提升...综上所述，通过CSS和JavaScript的结合，我们可以轻松实现table隔行变色的效果，无论是静态页面还是动态内容，都能提供良好的阅读体验。在实际开发中，可以根据项目需求灵活选择合适的方法。
jquery选取商品隔行变色
09-22
对于"隔行变色"，我们可以利用jQuery选择器来选取商品列表中的每一行，并通过CSS样式来改变颜色。 1. **HTML 结构** 商品列表通常以表格（`<table>`）或无序列表（`<ul>`）的形式呈现，每个商品作为一个单元格（`...
CSS2+JS实现table隔行变色
05-07
总结起来，结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中，我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式；在JavaScript中，我们通过DOM操作动态地添加或移除这些样式类，确保...
Table隔行变色的JavaScript代码
12-03
在网页设计中，为了提高数据表格的可读性，经常采用隔行变色的方法，使得用户更容易区分不同的行。在JavaScript中实现这个功能并不复杂，主要涉及到DOM操作、事件监听以及颜色值的设置。以下是对标题和描述中提及的...
实现表格的隔行变色
11-13
隔行变色主要通过CSS（Cascading Style Sheets）来实现，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。我们可以通过CSS选择器来定位表格的行（tr）元素，并应用特定的背景颜色。 ### ...
使用css选择器实现表格隔行换色
鹏仔工作室的秘密基地
06-22 1870
使用css选择器实现表格隔行换色 <style> *{ margin: 0; padding: 0; } body{ padding: 200px; box-sizing: border-box; } table{ border-collapse: collapse; } td,th{ color: #000; font-size: 16px; line-height: 30px; border: 1px solid #333; pa..
html table隔行变色,使用CSS3实现表格隔行/隔列变色
weixin_42314680的博客
06-10 1807
废话少说，先看效果，如果不是你想要的，你可以撤了~这些都是css控制的，然后我们看下样式：table tr:nth-child(odd){background:#F4F4F4;}table td:nth-child(even){color:#C00;}table tr:nth-child(5){background:#73B1E0;color:#FFF;}分别选择为：奇数行、偶数列、第五行，下面是...
html table表格隔行变色,css table表格隔行变色,vue中table表格隔行变色,element ui的table组件，ant-design的table组件
Eli_Code
04-11 4848
HTML table表格隔行变色 :nth-child(): 定义和用法 :nth-child(n) ： 选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 <style> /*设置奇数行颜色*/ table tr:nth-child(odd) { background: rgb(178, 178, 179); } /*设置偶数行颜色*/
html表格怎么设置隔行变色,针对table,div隔行变色的JS方法
weixin_35079144的博客
06-16 564
无标题文档.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px; width:50%}.mytable ul li { padding-top:7px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com...
CSS table表格隔行变色
weixin_45451375的博客
10-20 974
/设置奇数行颜色/ table tr:nth-child(odd) { background: #ccc; } /设置偶数行颜色/ table tr:nth-child(even) { background: #ccc; }
css如何实现隔行换色
百变鹏仔工作室
01-24 1285
上述代码中，为表格中的奇数行和偶数行分别设置了不同的背景颜色，从而实现了隔行换色的效果。选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，是两种不同的颜色值，可以根据需要进行修改。在CSS中，可以使用。
elementplus表格隔行变色css样式
最新发布
06-28
Element Plus 是 Vue 3 的 UI 组件库，提供了丰富的表格组件。要实现表格隔行变色的 CSS 样式，你可以使用伪类 `:nth-child` 结合 `odd` 或 `even` 来选择奇数行和偶数行。以下是一个基本的示例： ```css .table-striped { tr:nth-child(even) { background-color: #f2f2f2; /* 选择偶数行背景色 */ } tr:nth-child(odd) { background-color: #ffffff; /* 选择奇数行背景色 */ } } ``` 将这个 `.table-striped` 类应用到 Element Plus 的表格元素上，例如： ```html <el-table :class="{'table-striped': true}" ...> ... </el-table> ``` 在这个例子中，`...` 部分代表其他表格属性和列定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值