Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

礼悟：
　　公恒学思合行悟，尊师重道存感恩。叶见寻根三返一，江河湖海同一体。
虚怀若谷良心主，愿行无悔给最苦。读书锻炼养身心，诚劝且行且珍惜。

　　     ide：visual studio 2017　　
            browser：Firefox / Chrome
   　　bootstrap：3.3.7

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>Demo</title>
	<!-- 引入外部bootstrap的css文件(压缩版) -->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- NO.1 先引入jQuery文件(压缩版) -->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!-- NO.2 再引入js文件(压缩版) -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!--
        table-bordered:给表格加外边框
        table-striped:隔行换色 bootstrap是浅灰色与白色交替
        -->
        <table class="table table-bordered table-striped">
            <tr>
                <td>数字</td>
                <td>卦名</td>
            </tr>
            <tr>
                <td>1</td>
                <td>坎</td>
            </tr>
            <tr>
                <td>2</td>
                <td>坤</td>
            </tr>
            <tr>
                <td>3</td>
                <td>震</td>
            </tr>
            <tr>
                <td>4</td>
                <td>巽</td>
            </tr>
            <tr>
                <td>5</td>
                <td>中宫</td>
            </tr>
            <tr>
                <td>6</td>
                <td>乾</td>
            </tr>
            <tr>
                <td>7</td>
                <td>兑</td>
            </tr>
            <tr>
                <td>8</td>
                <td>艮</td>
            </tr>
            <tr>
                <td>9</td>
                <td>离</td>
            </tr>
        </table>
    </div>
</body>
</html>

效果

Bootstrap，优秀的前端开源框架，值得学习。
学习资源：v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源，可以分享给我的话，用您的资源学习也可以。
博文是观看视频后，融入思考写成的。博文好，是老师讲得好。博文坏，是给最苦没认真。

原文地址：https://www.cnblogs.com/jizuiku/p/8280479.html

时间： 2024-10-08 22:48:53

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）的相关文章

JS实现表格自动隔行换色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现表格自动隔行换色丨石家庄冷风机|</TITLE> </HEAD> <BODY> <style> .t1 {background-color:#C8FC98;text-align:center} .t2 {backgro

JS——表格的隔行换色

1.不使用JS完成表格的隔行换色: <html> <head> <meta charset="utf-8"> <title>成绩登记表格</title> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspa

JQ——选择器的应用（表格的隔行换色、全选和全不选）

1.表格的隔行换色: (1)核心代码: <script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script> 获取tbody中的元素,并对奇数行和偶

JavaScript表格的隔行换色开发

Html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行换色</title> </head> <body> <table id="tab1" border="1" width="800" align="center" >

Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Firefox / Chrome bootstrap:3.3.7 代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

表格的隔行换色

jQuery代码: $(function(){ var item = $("tr"); for(var i=0;i<item.length;i++){ if(i%2==0){ item[i].style.backgroundColor="#888"; } } //

Bootstrap3基础 warning/active... 表格的状态类（不同的背景色）

? 内容参数 ??OS ??Windows 10 x64 ??browser ??Firefox 65.0.2 ??framework?? ??Bootstrap 3.3.7 ??editor ??Visual Studio Code 1.32.1?? ??typesetting ??Markdown ? code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

实现table、列表隔行换色

为了增强用户体验,快速识别行内容,一般都会在一些列表或者表格设置隔行换色~ 本人了解到的有两种常用的方法~ 1,利用CSS进行隔行换色 tr{ background: #E0F0FA;} tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色 tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ? "#E0F0FA"

jQuery实现的table表格隔行换色代码实例

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t