用CSS完成斑马条纹表单

最新推荐文章于 2021-12-22 16:52:07 发布

weixin_30802171

最新推荐文章于 2021-12-22 16:52:07 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yojiaku/p/5736202.html

今天学习了<table> <th> <tr> <td> 标签的用法，下面用ＨＴＭＬ和ＣＳＳ来画一个简单的斑马条纹表单，让表单更好看

示例代码：ｚｅｂｒａ．ｈｔｍｌ

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML CSS Exercise CSS3 Zebra Striping a Table</title>
  <style type="text/css">
    table{
      border:1px solid silver;
    }
    th{
      background-color:#ccc;
    }
    tbody tr:nth-child(even){
      background-color:#abe;
    }
   </style>
  </head>
 <body>
  <table>
    <tr>
      <th> Id </th>
      <th> Name </th>
      <th> Major </th>
    </tr>
    <tr>
      <td> 1001 </td>
      <td> Gopl Murthy </td>
      <td> Physics </td>
    </tr>
    <tr>
      <td> 1002 </td>
      <td> Joy Sen </td>
      <td> Economics </td>
    </tr>
    <tr>
      <td> 1003 </td>
      <td> Chandu Yadav </td>
      <td> Chemistry </td>
    </tr>
    <tr>
      <td> 1004 </td>
      <td> Shalini </td>
      <td> Zoology </td>
    </tr>
    <tr>
      <td> 1005 </td>
      <td> Sameer Ali </td>
      <td> Botany </td>
    </tr>
   </table>
   </table>
 </body>
</html>

示例效果：

我用了 tbody tr:nth-child(even)　来完成奇数行的颜色填充，如果想要填充偶数列，那么就将这里的（ｅｖｅｎ）改为（ｏｄｄ）：

tbody tr:nth-child(odd){
      background-color:#abe;
    }

　　效果展示：

那如果想要奇数列着色呢？只需要把ｔｒ改成　ｔｄ即可：

tbody td:nth-child(odd){
      background-color:#abe;
    }

　　效果展示：

哈哈，还有更多的方法让表格变得好看起来，可以多尝试

转载于:https://www.cnblogs.com/yojiaku/p/5736202.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30802171

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML5制作斑马线表格,HTML_CSS,JavaScript和MooTools制作斑马纹表格，简单的斑马纹表格，如果页面 - phpStudy...

weixin_39581845的博客

06-11

808

简单的斑马纹表格，如果页面上有大量的表格数据时，隔行变色的斑马纹会帮助我们快速阅读，有利于用户体验。我们今天不讨论在动态语言中的方法，只讨论CSS，JavaScript，MooTools 是如何实现的，并有三种可行性方案。我们的表格The Html Code:1Lost In The PlotThe Dears2PoisonThe Constantines3Plea From A Cat Name...

CSS3 选择器完全指南：从基础到高级的元素定位技术

最新发布

读心悦

05-13

1070

CSS3选择器提供了从基础到高级的元素定位技术，帮助开发者精准控制页面样式。基础选择器包括元素选择器、ID选择器、类选择器和属性选择器，分别通过标签名、ID、类名和属性值匹配元素。复合选择器如后代选择器、子元素选择器、相邻兄弟选择器等，允许构建更复杂的匹配规则。伪类选择器基于元素状态（如链接状态、用户交互状态）进行动态匹配，而伪元素选择器如::before和::after则用于在元素内容前后插入生成的内容。这些选择器组合使用，能够实现灵活且高效的样式控制，提升页面的可维护性和用户体验。

参与评论您还未登录，请先登录后发表或查看评论

漂亮的斑马纹table表格(基于JQuery斑马纹表格)

12-16

一个简单的斑马纹表格，通过IE6/7/8、firefox、opera等浏览器测试。如果页面上有大量的表格数据时，隔行变色的斑马纹，基于jquery中的强大的选择器nth-child，以及addClass向表格中添加css样式制作的DEMO。漂亮的斑马纹table表格(基于JQuery斑马纹表格)demo的特点简单易用，代码中有简单的注释，下载即可用。提示， jquery 与mootools存在一定的冲突，jquery与mootools混合的环境未测试过，不一定保证可正常使用

html列表线,【html】斑马线表格

weixin_31582915的博客

07-02

1008

源于 how2j教程，这是个特别好的java网站。实现效果如下。table{border-collapse:collapse; /*边框合并*/width:90%;}tr.odd{ /*表格的奇数列的样式*/background-color:#f8f8f8;}tr.head{ /*表头的下边框*/border-bottom-width: 2px;}tr{border-bottom-style: s...

html如何做斑马表格

ObviouSly1的博客

11-04

1192

html斑马表格 tr:nth-child(2n){ background: #FFF0F5;} 效果如下：

前端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...

Bootstrap彩色斑马线条纹进度条设计教程

综上所述，"bootstrap彩色斑马进度条"的知识点涵盖了Bootstrap框架的使用、HTML结构的构建、CSS样式的编写以及JavaScript的交互实现。这要求开发者不仅需要掌握前端基础技术，还需要能够合理利用Bootstrap提供的工具...

CSS笔记（CSS禅意花园+CSS揭秘）

Koweico的博客

09-17

891

关联css与html 通过id在head标签中一一设置 <style type=”text/css”> #id名字{ Color：red; } </style> 新建css文件，在head标签中关联 <link href="文件名.css" rel="stylesheet" type="text/css" /> Css文件中： #id名字{color:red;} 在每个标签内直接加入style=“color：red；……” 书写规则选择器 {

Bootstrap 全局CSS样式：表格类的使用

WangMin@汪末末

08-30

1673

作者:WangMin 格言:努力做好自己喜欢的每一件事优快云原创文章博客地址 ???? WangMin 基本实例给任意 <table> 标签添加类 .table 可以给表格添加基本的样式 — 少量的内补（padding）和水平方向的分隔线。实例： <table class="table"> <tr> <th>#</th> <th>表格标题</th> <th>表格标

Bootstrap中的基础CSS：栅格系统表格表单按钮

锦鲤姑娘的博客

03-08

1002

一、bootstrap下载与安装二、基础CSS 1、栅格系统 2、表格 3、表单 4、按钮

Jquery + CSS 制作条纹table表格

03-03

一个不错的条纹表格，鼠标移动到某行上可以高显当前行。文档首次转载的时候可以出现奇偶相间的条纹效果，便于阅读。下载后你就知道啦。。。哈哈。。

html小总结:表格斑马纹的实现.

blue7wings的专栏

11-24

6903

效果: 原理: 最简单的方法就是在每一偶数行加上class选择器. code: css: tbody tr.even{ background-color:#AAA; } html: 书名价格作者简介 javasript程序设计99.00查理入门必学韩语入门33.00韩老师看完就能说 .....此处省略若干个字..

【table】给table表格设置一个通用的css3样式（默认有斑马条纹）

weixin_34072637的博客

05-07

754

/* = 表格（默认有斑马条纹） ------------------------------------------ */ .data-table { margin: 10px 0; } .data-table table { width: 100%; border-collapse: collapse; //设置表格边框合并为单一边框 } .data-table ca...

css 使用 :nth-child() 实现斑马条纹、对齐边缘、指定区间列表高亮、动态列表自适应布局

朝阳39的博客

12-22

679

:nth-child() 伪类选择器通常用于动态列表/表格斑马条纹表格 table { border-spacing: 0; width: 300px; text-align: center; border: 1px solid #ccc; } tr { background-color: #fff; } tr:nth-child(even) { background-color: #eee; } 对齐边缘 li { float: left;

css table中细线条以及线条间距问题

qq_44353287的博客

04-17

1226

css table中细线条以及线条间距问题今天在学习使用js动态生成table，发现了以下容易犯错的地方首先是线条问题，很明显图中的线条不是我们想要的细线条，这实在太丑了… 那么怎么实现细线条呢，先分析一下为什么会出现这样的丑线条。我们先给table添加了一个border，这样表格外围就会出现一个边框，但表格内的td并没有设置到，于是又给td设置了border，那问题来了，默认情况下td与...

html table斑马表格，一行灰一行白交替的效果

hello

04-03

6107

table样式 ._table{width: 100%; border-collapse: collapse; border:0px;} ._table thead tr {font-size: 13px; color: #2e3b45; text-align: center; background-color: rgba(230, 255, 250, 0.92); font-weight

css 怎么做出黑白相间的table

廖圣平

05-31

2928

只需要在这个table 加上相应的 table tr:nth-child(odd){ background: #ccc; } 就可以了 table tr:nth-child(odd){ background: #ccc; } table{ background:red; } 1 2 3 1-1 1-2 1-3 1-1 1-2 1-3 1

css怎么设置表格斑马纹效果,利用CSS3选择器实现表格的斑马纹

weixin_35703897的博客

08-03

758

要用到的Css3选择器element:nth-child(number){}选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数even 偶数完整demo: 测试 #testtable tbody tr:nth-child(odd) { /* 匹配奇数行 */ background-color: ...

css实现斑马线条纹

weixin_43294560的博客

10-13

2910

通过线性渐变,控制背景为白色-透明-白色-透明,然后控制背景大小,让背景background-repeat:repeat重复,就能实现斑马条纹代码示例： div { width: 400px; background-color: blue; } div::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; backgroun