自动换整行颜色的CSS样式表格（需要用到JS）

这个CSS表格会自动切换每一行的颜色，这种呈现方式，在我们编辑一个数据庞大的表格时，非常好用。

自动换整行颜色的CSS样式表格

链接: html好看的CSS表格.

图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

源代码

表格的样式.

<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor"><tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></tr><tr><td>Text 3A</td><td>Text 3B</td><td>Text 3C</td></tr><tr><td>Text 4A</td><td>Text 4B</td><td>Text 4C</td></tr><tr><td>Text 5A</td><td>Text 5B</td><td>Text 5C</td></tr>
</table>

CSS的样式

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
table.altrowstable {font-family: verdana, arial, sans-serif;font-size: 11px;color: #131313;border-width: 10px;border-color: #ad9a2f;border-collapse: collapse;
}table.altrowstable th {border-width: 2px;padding: 16px;border-style: solid;border-color: #5d6fbe;
}table.altrowstable td {border-width: 2px;padding: 8px;border-style: solid;border-color: #911b0f;
}.oddrowcolor {background-color: #116975;
}.evenrowcolor {background-color: #a5a9a6;
}

<!-- Javascript goes in the document HEAD -->
function altRows(id) {if (document.getElementsByTagName) {const table = document.getElementById(id);const rows = table.getElementsByTagName("tr");for (let i = 0; i < rows.length; i++) {if (i % 2 == 0) {rows[i].className = "evenrowcolor";} else {rows[i].className = "oddrowcolor";}}}
}window.onload = function () {altRows('alternatecolor');
}

头部元素

<head><meta charset="UTF-8"><title>好看的表格</title><script type="text/javascript" src="javascript.js"></script><link type="text/css" href="style.css" rel="stylesheet"/>
</head>

一个很漂亮的表格样式希望对你有所帮助！

文章参考
https://www.w3school.com.cn/
https://developer.huaweiuniversity.com/

一个好看的CSS样式表格相关推荐

四个好看的CSS样式表格
原文地址为: 四个好看的CSS样式表格 1. 单像素边框CSS表格这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added ...
常用的四种CSS样式表格
1. 单像素边框CSS表格这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
表格css样式 ——表格背景，隔行变色，触摸表格变色
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.表格背景二.隔行变色三.触摸表格行变色总结前言我来给大家讲解一下提示:以下是本篇文章正文内容,下面案例 ...
一些好看的css样式
最近看了了一本书叫<css揭秘>,里面的内容让我有种css原来能这样玩的感觉,哈哈哈.在这里跟大家分享一部分里面的样式,有兴趣的可以去看看.这本书有电子版. 先看看效果图: 那个蚂蚁行军框 ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
一个好看的Dialog样式实现，仿IOS
消息对话框在实现Android原生态开发的过程中是十分重要的.该篇文章将讲述仿IOS的消息对话框的实现.具体代码来源于网路(忘记了具体文章来源). 实现效果如下图: 该消息对话框的实现主要 ...
html输入框是一条横线,html把输入的文本框变成一个下横线css样式
这个一个非常简单的效果,就是将input的输入框,变成一条横线的效果,这样在一些界面处理中,更加的好,而不是一个输入框.html PUBLIC "-//W3C//DTD XHTML 1.0 ...
html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签用<tabl ...
（1）一些css样式—链接、列表、表格、轮廓、字体
一.链接: 1.css连接到的四种状态 a:link 普通的.未被访问的连接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方,就是准备点击时候的链接 a:a ...
html表ge模板_16款用户体验优秀的HTML CSS价格表格模板附演示及下载
网友热度 159,461 ℃ - 4条评论如果我们在访问某些产品销售类网站的时候,看到产品的价目展示用户体验,很大程度上会影响我们的购买需求,所以说我们在自己.客户的网站价目表格展示的时候,用上特有 ...

一个好看的CSS样式表格

一个好看的CSS样式表格

自动换整行颜色的CSS样式表格（需要用到JS）

自动换整行颜色的CSS样式表格

源代码

一个好看的CSS样式表格相关推荐

最新文章

热门文章