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

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


               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>
    <!--
        table-bordered:给表格加外边框
        table-hover:鼠标悬停时,对应的行变色
        -->
    <table class="table table-bordered table-hover">
        <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>
</body>
</html>

效果



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

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

时间: 2024-07-30 19:49:42

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

table 会有默认的外边框,内部会有分割线

.表格中边框的显示 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左.右边框 <table frame=vsides> 只显示上.下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> .表格的分隔线可以隐藏

Bootstrap3基础 table-responsive 响应式表格

? 内容 参数 ??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

NPOI_winfrom导出Excel表格(合并单元格、规定范围加外边框、存储路径弹框选择)

1.导出 1 private void btn_print_Click(object sender, EventArgs e) 2 { 3 DataTable dtNew = new DataTable(); 4 5 dtNew.Columns.Add(new DataColumn("commodity_name", typeof(object))); 6 dtNew.Columns.Add(new DataColumn("specifications", type

Bootstrap3基础 table-condensed 表格中的单元格紧凑一些

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

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

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

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst

ansys中压力随时间变化的表格加载方法

原文地址:http://wenku.baidu.com/link?url=w9k94Upqbok0SUNU3L7LOLRDLUtP7W_KyQWK68ajK_nEbO00mO6hzbuBQ01rS076dyscSy0mWovv9gw5ykk6mPIFQsrRqg04YNXzDSnfOFe 1.在ansys中按步骤完成你在加载前需要的所有设置,然后到了加载这一步,首先我在fluent中用txt文档打开了.out的文件,提取了压力数据,并且把它们排好格式(数与数之间要用table键隔开,而不是空格,

table表格嵌套,边框重叠变粗

在外层table与内层table嵌套,内外表格都需边框时,设置"border=1",但边框会重复,造成某些地方边框粗,有些地方边框细 解决方法 1.外表格样式 <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;"> 2.内表格样式 <table border="1&

hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题. html 如下  <div class="hot-recommend">         <div class="wrapper">             <div class="offer-list">                 <ul class='underline'>                     <li cla