JavaScript + CSS 美化出的条纹表格样式

最新推荐文章于 2023-05-10 09:32:31 发布
最新推荐文章于 2023-05-10 09:32:31 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishirong/article/details/41674433
版权
JavaScript + CSS 条纹数据表格样式，就是大家知道的隔行换色功能，这样会使表格结构更加清淅，有利于阅读，同时表格也会变得漂亮起来，本效果包含了四种样式，不同的表格边框和表格空隙，根据你的需要选用。

<!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=utf-8"/>
<title>表格样式</title>
<style type="text/css">
body{
margin: 6px;
padding: 0;
font-size: 12px;
font-family: tahoma, arial;
background: #fff;
}

table{
width: 100%;
}
tr.odd{
background: #fff;
}
tr.even{
background: #eee;
}

div.datagrid_div{
width: 100%;
border: 1px solid #999;
}

/*****************样式1*******************/
table.datagrid1{
border-collapse: collapse;
border-bottom: 1px solid #666;
}
table.datagrid1 th{
color: #333;
padding: 3px;
font-family: monospace;
background: #9cf;
text-align: left;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
table.datagrid1 td{
padding: 3px;
border-top: 1px solid #ccc;
}

/*****************样式2*******************/
table.datagrid2{
border-collapse: collapse; 
}
table.datagrid2 th{
text-align: left;
background: #9cf;
padding: 3px;
border: 1px #333 solid;
}
table.datagrid2 td{
padding: 3px;
border: none;
border:1px #333 solid;
}


/*****************样式3*******************/
table.datagrid3{
border-collapse: separate;
}
table.datagrid3 th{
text-align: left;
background: #ddd;
padding: 3px;
border: 0px solid #fff;
}
table.datagrid3 td{
padding: 3px;
border: 0px solid #fff;
}


/*****************样式4*******************/
table.datagrid4{
border-collapse: collapse; 
}
table.datagrid4 th{
text-align: left;
background: #ddd;
padding: 3px;
border: none;
}
table.datagrid4 td{
padding: 3px;
border: none;
border-top: 1px solid #fff;
}

tr:hover,
tr.hover{
background: #9cf;
}

</style>

<script type="text/javascript">
function add_event(tr){
tr.onmouseover = function(){
tr.className += ' hover';
};
tr.onmouseout = function(){
tr.className = tr.className.replace(' hover', '');
};
}

function stripe(table) {
var trs = table.getElementsByTagName("tr");
for(var i=1; i<trs.length; i++){
var tr = trs[i];
tr.className = i%2 != 0? 'odd' : 'even';
add_event(tr);
}
}

window.onload = function(){
var tables = document.getElementsByTagName('table');
for(var i=0; i<tables.length; i++){
var table = tables[i];
if(table.className == 'datagrid1' || table.className == 'datagrid2'
|| table.className == 'datagrid3' || table.className == 'datagrid4'){
stripe(tables[i]);
}
}
}
</script>
</head>
<body>
<div style="width: 480px;">
<h3>样式1</h3>
<table class="datagrid1">
<tr>
<th>合约</th>
<th>最新价</th>
<th>涨跌</th>
</tr>

<tr>
<td>纽期所原油</td>
<td>54.39</td>
<td>-0.56</td>
</tr>
<tr>
<td>纽约期金</td>

<td>738.5</td>
<td>5.8</td>
</tr>
<tr>
<td>CBOT大豆</td>
<td>905.25</td>
<td>3.25</td>

</tr>
</table>


<h3>样式2</h3>

<table class="datagrid2">
<tr>
<th>合约</th>
<th>最新价</th>
<th>涨跌</th>
</tr>
<tr>
<td>CBOT大豆</td>
<td>905.25</td>
<td>3.25</td>

</tr>
<tr>
<td>ideawu.net</td>
<td>381.25</td>
<td>1.25</td>
</tr>
<tr>

<td>CBOT小麦</td>
<td>548.5</td>
<td>-1</td>
</tr>
</table>


<h3>样式3</h3>

<div class="datagrid_div">
<table class="datagrid3">
<tr>
<th>合约</th>
<th>最新价</th>
<th>涨跌</th>
</tr>
<tr>
<td>CBOT大豆</td>
<td>905.25</td>
<td>3.25</td>

</tr>
<tr>
<td>ideawu.net</td>
<td>381.25</td>
<td>1.25</td>
</tr>
<tr>

<td>CBOT小麦</td>
<td>548.5</td>
<td>-1</td>
</tr>
</table>
</div>


<h3>样式4</h3>

<div class="datagrid_div">
<table class="datagrid4">
<tr>
<th>合约</th>
<th>最新价</th>
<th>涨跌</th>
</tr>
<tr>
<td>CBOT大豆</td>
<td>905.25</td>
<td>3.25</td>

</tr>
<tr>
<td>ideawu.net</td>
<td>381.25</td>
<td>1.25</td>
</tr>
<tr>

<td>CBOT小麦</td>
<td>548.5</td>
<td>-1</td>
</tr>
</table>
</div>
</div>
</body>
</html>

效果：
JavaScript + CSS 美化出的条纹表格样式 - lishirong - The CTO of LiShirong
 
文章转自：http://www.codefans.net/jscss/code/1482.shtml
李世荣
关注
专栏目录
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
JavaScript 表格 条纹表格
wgy-wtt
05-15 382
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>条纹表格效果</title> <style type="text/css"> table{border: 1px solid #007108; border-collapse: collapse; background-color: #D9FFDC; text-alig
js实现的3种好看的表样式，包括顶部有表头，左侧有表头，顶部和左侧都有表头
05-24
js实现的3种好看的表样式，包括顶部有表头，左侧有表头，顶部和左侧都有表头
js前端，一个漂亮的自写表格table
最新发布
hwlll的博客
05-10 3021
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
Jquery + CSS 制作条纹table表格
03-03
为了提升用户体验，我们经常需要对表格进行美化，其中一种常见的方式就是制作条纹表格。条纹表格通过交替的颜色来区分不同的行，使得用户在查看大量数据时能更清晰地区分每一行，减轻视觉疲劳。在这个主题中，我们将...
漂亮的表格css+html
03-20
2. **CSS美化表格**： - `border-collapse`：控制表格边框是否合并，`collapse`可以使边框更紧凑，`separate`则保持边框独立。 - `border-spacing`：设置单元格之间的距离。 - `background-color`：设置单元格或...
css样式表格
07-11
本压缩包“css样式表格”显然是一个包含各种CSS技巧和方法的资源集合，专门用于创建和美化表格。表格在网页中常用于展示数据，如报告、日程安排、数据库结果等。下面我们将深入探讨如何使用CSS来设计和优化表格。 1...
8款非常好看的css表格
08-04
虽然Slick Grid使用了JavaScript，但它在CSS方面也有出色表现，提供了高度定制的表格样式，包括行选择、分页、滚动和列排序等功能，适用于大数据集的显示。 每款CSS表格都有其独特之处，开发者可以根据项目需求和...
JS实现漂亮的表格table特效代码
09-11
JS实现漂亮的表格table特效代码，四五种效果可选择哦
简单漂亮的表格样式
06-12
自制的，比较漂亮的表格样式，不算华丽，自我觉得可以
表格编辑css美化及javascript
08-29
html5，css,javascript结合运用，用于表格编辑及美化，适用后台管理系统
非常漂亮的css+table+js BS模板
12-01
非常漂亮的css+table+js BS模板
javascript简单代码编写条纹表格附源码
08-08
这是我用jquery框架编写的带有条纹的表格，您在使用时，请勿必先下载jquery.js这个框架，再引用。而且还要注意里的css，请你们自己编写css，范例 tr.over td{background:#536877;color:#ffffff;} .stripeMe{border:1px solid #dae4eb;} tr.alt td{background:#dae4eb;}; --高级前端设计师朱琦
几个好看的表格样式
weixin_38168322的博客
08-23 2054
参考：https://www.w3cschool.cn/css/css-sfrk2opy.html 参考：http://www.hipenpal.com/tool/css-beautiful-table-templates-in-simplified-chinese.php?nowpage=5&movepage=2&type=1&od=e 四款好...
CSS3斑马条纹表
CSS 初学者指南
06-21 210
tbody tr:nth-child(odd) { background-color: #ccc; } 翻译自: https://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
13种常用按钮、文本框、表单等CSS样式
weixin_30454481的博客
06-11 1352
一、按钮样式.buttoncss{font-family:"tahoma","宋体";/*www.52css.com*/font-size:9pt;color:#003399;border:1px#003399solid;color:#006699;border-bottom:#93bee21pxsolid;border-left:#93bee21pxsolid;border-right:#93b...
css3 条纹化和透明化表格
Eliza1130的专栏
04-14 1465
使用class来条纹化表格，需要
Ajax+Css表格（转载）
天高地厚的专栏
12-18 1236
  并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。 并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值