[前端]表格隔行换色和细线边框实例

最新推荐文章于 2022-01-19 09:55:01 发布
最新推荐文章于 2022-01-19 09:55:01 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： J2EE 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/napoay/article/details/48087995
版权
  • 隔行换色
    当表格行数较多的时候，每一行都是同一种颜色不方便阅读。通常的解决方法是采用隔行变色，使得奇数行和偶数行的颜色背景不一样，方便阅读。这种效果非常常见，实现起来也非常简单，给奇数行和偶数行分别设置不同的选择器，css设置不同的背景颜色即可.
    这里写图片描述

  • 细线边框
    表格默认边框比较粗，可以给表格设置一个背景颜色，cellspacing设为1像素，td颜色设为白色覆盖掉背景颜色，cellspacing空出1像素实现细线边框样式.
    这里写图片描述

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表格隔行换色实例</title>
    <style type="text/css">
           body{
              width: 960px;
              margin:0 auto;
              text-align: center;
              font-family: 微软雅黑;
           }       
           .even{
               background-color: #8DEEEE;
           } 
           .tb_td{
                background-color:#ffffff;
           }

    </style>
</head>
<body>
<H1>HTML表格隔行换色实例</H1>
    <table width="90%"  cellspacing="1px" cellpadding="5px">
        <tr class="tb_head" >
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
        </tr>
        <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
    <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
            <tr class="old">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
        <tr class="even">
            <td>1108140119</td>
            <td>王子</td>
            <td>计算机111</td>
            <td>男</td>
        </tr>
    </table>


    <H1>细线表格样式</H1>

     <table bgcolor="#cccccc" width="90%" cellpadding="10" cellspacing="1px" id="table2" >

       <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
    <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr><tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
         <tr>
            <td class="tb_td">1108140119</td>
            <td class="tb_td">王子</td>
            <td class="tb_td">计算机111</td>
            <td class="tb_td">男</td>
        </tr>
     </table>
</body>
</html>

这里写图片描述

esc_ai
关注
专栏目录
1、4表格细线边框合并
qq_62865634的博客
10-08 1123
本文仅仅简单介绍了表格合并后边框会1+1=2，我们要让边框变为1+1=1，那么就加border-collapse：“collapse”
html中border细线样式,网页中实现细线边框的两种方法
weixin_32121569的博客
06-22 2357
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用CSS强制定义。如何用表格嵌套呢?大家都知道，用Bgcolor可以在表格中任意定义表格的背景颜色，用Cellspaci...
前端实现表格隔行变色
weixin_41551266的博客
09-05 1565
1.  CSS方法实现：   tr {background-color:expression((this.rowIndex % 2==0)?"red":"blue")}     此处有必要说明一下，expression是css的一个属性，用法是获取圆括号中javascript中的值作为css的属性值，IE5以上支持；   (css3方法)    tr：nth-child(odd){ ...
前端html利用CSS实现table表格斑马纹隔行换色效果
我是Sinlion
09-07 1万+
在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
纯CSS打造隔行变色表格
auyeung_anne的专栏
04-11 1505
纯CSS打造隔行变色表格 45 Replies 不知道各位用过Excel没有？在处理大量数据的时候，Excel隔行变色的设计是不是让你舒服很多？ 现在网上有很多利用jQuery制作隔行变色表格的教程，但你认为为了小小的一个表格而加载50多k的js是否值得？即使贵站有大量表格，其实还不如用CSS方便。要知道这个效果到底有多方便，看下去就知道了。 首先写好表格内容，通常如下：
制作漂亮的超细线表格
无恨
03-11 918
不要跟我说现在是DIV 和CSS的天下，所以你完全摒弃了table，很多刚刚开始学习Xhtml的童鞋往往都存在这样的误解：以为使用div+CSS才是前卫的技术，于是对table不屑一顾，其实不然，不管web前端发展到什么程度，只要html一天还在用，那table就不会死。为什么这样说？下面这个例子你就知道，DIV 和table，它们各有各的用处，而且有些地方是无法替代的： 比如我要在一个
css 0.5px 间隔细线 | border 细线的实现 参考WeUI
huch的博客
07-31 9702
在Android中系统是识别0.5dp的，但是在web中浏览器内核在遇到0.5px时会向上取整为1px。 前端UI设计的间隔线都是设计0.5px，这时候用border-bottom: 1px solid #e6e6e6; 效果还是很粗的，UI复核页面的时候肯定不过关的。 下面说一下参考WeUI的解决方案： WeUI 间隔线 先看WeUI源码的实现 提取核心： .weui-...
html制作细线表格的简单实例
09-28
HTML制作细线表格的实例中主要涉及的知识点包括HTML表格的属性设置、CSS样式应用、以及通过CSS控制表格边框的视觉效果。以下是详细的解释： 1. table标签属性设置：在HTML中，创建表格通常使用table标签，并且可以...
Dreamweaver中不用CSS样式为表格添加细线边框的方法
09-24
5. 配色：通过`bgcolor`属性，为表格、行或单元格设置背景色，以达到边框的效果。例如，将表格背景设为蓝色，单元格内容设为白色： ```html ... <td bgcolor="#FFFFFF">  <td bgcolor="#FFFFFF"> ...
css 细线表格 css制作table细线表格常用属性
09-25
这个属性用于合并表格的内外边框，其目的是消除默认情况下表格边框之间的间隙，使得边框看起来更细。当`border-collapse`设置为`collapse`时，相邻的边框会合并成一个单一的边框，从而达到细线的效果。例如，在给...
web前端-----细线表格（table）的制作
weixin_47339511的博客
11-25 1408
** 主要是用border属性中的 border-collapse 再加个属性值：collapse即可 ** <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .tab{
前端vue用js更改表格某一行背景色方法
qq_43644046的博客
01-19 2999
前端vue用js获取列表某一行后改变背景颜色（可以用改变背景色来代替获取焦点） 找到要获取的行或者组件 寻找id属性或者class属性 虽然class属性可能设置的一样，但是可以全部获取，可以刚好后面接[i]值 data里面添加 data(){ idSearch:[], wantSearch:'', tableData: [],//你要改变的表，需要你自己的数据 num:0, } method方法里面添加 效果图 ...
React前端库，table中的每列内容，进行强制换行的解决方法
daiqinge的博客
03-02 1万+
1.问题描述：管理系统的前端实现用的是React+ant design，但是React的table，每列的值，如果用&lt;br /&gt;或者/r/n 来实现，则还是换行无效。如下图，SN值是多个以分号分隔的值，现在希望多个sn值能分行显示，将分号替换成 &lt;br /&gt;或者/r/n ，列值就变成了"value1 &lt;br /&gt;value2 " 或者"value1 /r/n v...
BIRT中表格隔行换颜色效果
老木头
05-28 835
鼠标指在表格处，会在表格下方出现“Table”按钮，点击一下全选表格，再点击左边选择“Detail”行；切换到“Script”页，从下拉列表中选择“OnCreate”，加入如下代码：  if(row.__rownum % 2 == 0) { this.getStyle().backgroundColor = "#FAD764"; } else{ this.getStyle()
表格（table）隔行换色
古老的未来
08-04 1814
table, tr, td, th {             padding: 0;             margin: 0;             border-bottom: solid 1px #d9ebf3;           border-collapse: collapse;           }         table {            
鼠标换过 边框 变色 并带有动画效果
麻球科技
03-03 1730
效果图： 鼠标滑过之前 html: 职位名称 职位名称 职位名称
css怎么设置table表格的边框为单线边框？（代码详解）
热门推荐
沈行的博客
08-14 5万+
table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先我们来看看给table表格添加边框后，它的默认效果： 1 2 3 4 5 6 table,table td{ border...
jQuery实现table隔行换色和鼠标经过变色
itmyhome的专栏
06-14 8483
jQuery实现table隔行换色和鼠标经过变色 一、隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定： $("table tr:nth-child(odd)").css("background-color","#eeeeee"); 二、鼠标经过变色 $("tr").live({ mouseover:function(){ $(this).
html生成几行,利用JS动态生成隔行换色HTML表格的两种方法
weixin_32678995的博客
06-08 411
用JS生成动态生成表格，行、列由用户输入，并使表格隔行换色方法一.代码:动态表格function createTable(){var table = document.createElement("table");//添加边框table.border = "1";table.width = "100%";//table API//创建一行//var tr = table.insertRow(tab...
HTML技巧：创建双细线边框表格
由于表格边框和单元格边框各自都是1像素宽，如果设置了非零的间距`cellspacing`，它们之间就不会完全重叠，从而呈现出双细线边框的效果。这种技术常用于创建具有一定视觉风格的网页元素。 HTML，全称HyperText ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

esc_ai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值