奇偶行table颜色不同

最新推荐文章于 2024-03-13 15:52:15 发布
最新推荐文章于 2024-03-13 15:52:15 发布
阅读量5.5k 收藏
点赞数
分类专栏： html 文章标签： table border xhtml 平台 html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czbing308722240/article/details/7899701
版权

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  td {
  text-align:center
  }
    tr{    background:#FFF;    }             
  tr:nth-child(2n){         background:#F0F0F0; }
 tr{         background-color: expression((this.sectionRowIndex % 2 == 0) ? "#FFF" : "#F0F0F0" );}


</style>
</head>
<body>

<p align="center"><strong>大汉三通Lares服务平台Lboss请求统计</strong></p>
<table width="288" height="154"     border=1 align="center" cellpadding="0"  cellspacing="0" borderColor="#000000" bgcolor="#CCCCCC" style="BORDER-COLLAPSE: collapse">
  <tr>
    <th>数据描述</th>
    <th>总数</th>
  </tr>
  <tr>
    <td>失败总数</td>
    <td>27</td>
  </tr>
  <tr>
    <td>成功总数</td>
    <td>61298</td>
  </tr>
  <tr>
    <td>Lboss请求成功数 </td>
    <td>8621</td>
  </tr>
  <tr>
    <td>Lboss请求失败数</td>
    <td>0</td>
  </tr>
  <tr>
    <td>MQ请求成功数 </td>
    <td>52677</td>
  </tr>
  <tr>
    <td>MQ请求失败数 </td>
    <td>27</td>
  </tr>
  <tr>
    <td>非法请求数 </td>
    <td>19</td>
  </tr>
</table>
<p align="center"><strong>大汉三通Lares服务平台Lboss最近请求</strong></p>
<table width="514" height="160"     border=1   align="center" cellpadding="0" cellspacing="0" borderColor=#000000 bgcolor="#CCCCCC"  style="BORDER-COLLAPSE: collapse" >
  <tr>
    <th  bordercolor="#000000">数据描述</th>
    <th  bordercolor="#000000">终端号</th>
    <th  bordercolor="#000000">时间</th>
  </tr>
  <tr>
    <td bordercolor="#000000">最近成功请求</td>
    <td bordercolor="#000000">0000064614541875</td>
    <td bordercolor="#000000">2012-08-06 14:10:12</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近失败请求</td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:58</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近非法请求 </td>
    <td bordercolor="#000000">0000064614802441</td>
    <td bordercolor="#000000">2012-08-06 08:12:43 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近Lboss失败请求 </td>
    <td bordercolor="#000000">---</td>
    <td bordercolor="#000000">---</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近MQ失败请求 </td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:53 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最慢响应请求 </td>
    <td bordercolor="#000000">0000064685040174</td>
    <td bordercolor="#000000">2012-08-06 10:54:09</td>
  </tr>
</table>
</body>
</html>

冰之萃
关注
专栏目录
当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
09-25
10. 样式重置：在代码的注释部分提到了“设置鼠标经过颜色的变化”以及“设置奇偶行颜色的交替”，这表明了在实际开发中，可能会涉及到CSS的重置（resetting）或归一化（normalizing）技巧，即消除不同浏览器间的...
纯CSS实现 table 表格奇偶行不同颜色
jinyeweiyang的专栏
09-29 8244
[摘要]本文介绍纯CSS实现 table 表格奇偶行不同颜色，并提供详细的示例代码供参考。 CSS代码： View Row Code 1 .table-striped tbody tr:nth-child(odd) td { 2 background-color: Red  ; 3 }
DataGridView 奇偶行背景颜色定义
weixin_34184561的博客
06-03 1290
由于DataGridView有时的数据实在很多，如果只是网格线也看起来也是不爽滴说。 所以改变一下奇偶行的颜色，改为一行白色一行浅色，看起来爽多了.. 1.需要添加一个事件（DataBindingComplete）： code: private void dgvBeforeGZ_DataBindingComplete(object send...
bootstrapTable隔行变色
qq_40308101的博客
07-26 979
rowStyle: function (row, index) {//隔行变色 let classesArr = ['success', 'info']; let strClass; if (index % 2 === 0) {//偶数行 strClass = classesArr[0]; } else {//奇数行 strClass = classesArr[1]; } return {classes: strClass};
table 设置奇偶行颜色不一样
weixin_46600931的博客
09-15 831
项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分。
:nth-child(n)
lxw1844912514的博客
04-28 384
规定属于其父元素的第二个子元素的每个 p 的背景色： p:nth-child(2) { background:#ff0000; } 1定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 该选择器选取父元素的第 N 个子元素，与类型无关。 2 :nth-of-type() 选择器，该选择器选取父元素的...
表格奇偶行设置不同颜色的核心JS代码
10-26
为了解决这个问题，我们可以采用一种简单的视觉区分技术，那就是通过奇偶行不同颜色的设置，提高表格数据的可读性。这种方法尤其在数据行较多时效果显著，它可以帮助用户更快地区分每一行数据，从而提升整体的用户...
jquery css 设置table的奇偶行背景色示例
10-25
在网页设计与开发中，为了提高表格数据的可读性，我们经常需要对表格中的奇数行和偶数行设置不同的背景颜色。这种做法不仅可以使表格看起来更加美观，还能帮助用户更轻松地识别不同行的数据。本文将详细介绍如何使用...
如何用jquery控制表格奇偶行及活动行颜色
10-26
在这个主题中，我们将探讨如何使用jQuery来控制表格中奇偶行以及活动行的颜色。jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，从而让Web开发更加方便快捷。 1...
ant-design-vue vue2 a-table行间隔颜色控制，奇偶行颜色
LlanyW的专栏
11-04 3623
a-table>要单独设置颜色实现需要css穿透方式实现，而且要指定特定class名字否则会影响所有table。如标题所说，table的行颜色一样不明显，需要行间隔颜色明显，逻辑是通过奇偶行数来单独设置颜色。这个是写在模版.vue文件最后 里面。
让el-table奇数行偶数行颜色不一样
fenfen5162的博客
03-13 1025
让el-table奇数行偶数行颜色不一样
el-popover 点击input框出现table表，可点击选中，可拼音检索完回车选中
weixin_30858241的博客
06-04 699
<template> <card> <el-popover placement="right" width="400" trigger="click" > <el-table ref="singleTable" :data="pinyinOptions" highlight-current-row style="width: 10...
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
编程界明世隐的博客
12-10 4533
最主要就是用到属性的绑定 :class <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> * { margin: 0px; padding: 0px; } body { .
给antd中table表格奇偶行设置不同样式（背景颜色交替）
Afterwade的博客
12-29 6294
今天在写大屏的时候碰到一个需求，需要将table表格展示的数据每一行背景颜色交替，翻阅资料后，完成了这个需求。 如下图： table组件中有个rowClassName属性，让我们可以通过给每一行添加不同的类名然后设置不同行的样式 jsx代码： import React, { Component } from 'react'; import {Layout,Select,Table} from 'antd' import './index.less' const { Option } = Select;
php输出table表格奇偶行不同颜色,jQuery实现表格奇偶行显示不同背景色 就这么简单...
weixin_35728089的博客
03-10 552
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。代码如下所示：.odd {background-color:yellow;}.even {background-color:red;}No.10001No.20002No.30003No.40004显示效果：但是假设表格有上百行甚至上千行，同时不...
php输出table表格奇偶行不同颜色,JavaScript_如何用jquery控制表格奇偶行及活动行颜色，虽然jquery流行已经很多年了， - phpStudy...
weixin_29081101的博客
03-10 215
如何用jquery控制表格奇偶行及活动行颜色虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。先定义好表...
vue的表格table如何给单双行添加不同的背景色
qq_40825981的博客
08-11 4776
vue的表格table如何给单双行添加不同的背景色 vue的表格table如何给单双行添加不同的背景色 想要实现这种效果有两种方法。 第一种： 最简单的方法,让奇数行等于true，就是给奇数行添加了灰色背景了。 <el-table :stripe="true"> 第二种： 在vue中如果你写了一个函数，完全正确但是套不进去，假如你已经写了这样一个函数： <el-table :row-class-name="tableRowClassName"> methods :{ ta
html table奇偶行颜色设置 (CSS选择器)
weixin_34258782的博客
01-06 1131
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;style type="text/...
antd中table表格奇偶行设置不同样式(颜色交替)
天心天地生的博客
08-06 6287
前言 在做antd表格时通常会用到table组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将表格的奇数行和偶数行设置为不同样式呢,如下图所示 react中覆盖antd组件的样式 渲染时给奇偶行设置不同类名 利用Table组件官方API接口修改行的类名,通过类名设置不同行的样式. js文件TableChangeDom.js /** * @file 列表奇偶行设置不同样式;渲染时给奇偶行设置不同类名 * */ import React from "react"; import {
使用双重for循环动态地创建一个表格，并且使奇偶行的背景颜色交替变化。
最新发布
09-11
3. 在添加每一行时，通过判断行索引的奇偶性来设置不同的背景颜色。 下面是一个简单的示例代码： HTML部分: ```html <!DOCTYPE html> 动态创建的表格 .even-row { background-color: #f2f2f2; } .odd-row {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值