程序员经验分享-hwhale

Boostrap对HTML的表格的设计和优化

2023-11-11

01-Bootstrap的默认表格风格

Bootstrap对表格的相关HTML标签进行了覆写和优化，有如下这些与表格相关的标签被覆写和优化了：
<table>：表格容器。
<thead>：表格的表头容器。
<th>：表格表头中的单元格。
<tbody>：表格主体容器。
<tr>：表格的行。
<td>：表格的单元格，在<tbody>内使用。<td>标签来自于英文单词"table data"的缩写。

以上标签的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置表格的默认样式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品销售表</h2>
<table class="table">
    <thead>
        <tr>
            <th>名称</th><th>产地</th><th>价格</th><th>库存</th><th>销量</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>洗衣机</td><td>北京</td><td>6800元</td><td>2600台</td><td>1200台</td> </tr>
        <tr>
            <td>冰箱</td><td>上海</td><td>5990元</td><td>3600台</td><td>800台</td> </tr>
        <tr>
            <td>空调</td><td>广州</td><td>12660元</td><td>4200台</td><td>1200台</td> </tr>
        <tr>
            <td>电视机</td><td>西安</td><td>2688元</td><td>6900台</td><td>500台</td></tr>
    </tbody>
</table>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

02-没有边线-边界的表格

为<table>标签添加类 table-borderless 可以实现无边界风格的表格。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>没有边框的表格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">学生成绩表</h2>
<table class="table table-borderless">
    <thead>
    <tr>
        <th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>张宝</td><td>一班</td><td>89</td><td>96</td><td>69</td></tr>
    <tr>
        <td>李丰</td><td>一班</td><td>93</td><td>94</td><td>98</td></tr>
</table>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-行与行的背景颜色交替变换(条纹样式)

可以用Bootstrap的类table-striped自动为表格的每一行（tr元素）添加条纹样式，使得每一行的背景色交替变化，从而提供更好的可读性。这对于大量数据的表格非常有用，因为它可以帮助用户更容易地区分不同的行。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条纹状的表格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">1月份工资表</h2>
<table class="table table-striped">
    <thead>
    <tr>
        <th>姓名</th><th>部门</th><th>工资</th><th>奖金</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>刘梦</td><td>销售部</td><td>8600元</td><td>800元</td></tr>
    <tr>
        <td>李丽</td><td>销售部</td><td>4500元</td><td>900元</td></tr>
    <tr>
        <td>张龙</td><td>财务部</td><td>6800元</td><td>1200元</td> </tr>
    <tr>
        <td>林笑天</td><td>设计部</td><td>7800元</td><td>600元</td>
    </tr>
    </tbody>
</table>
</body>
</html>

运行效果如下：
在这里插入图片描述
没有条纹样式的效果如下：
在这里插入图片描述

04-给表格加上边框效果

可以利用类table-bordered实现边框效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格边框风格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
    <tr>
        <td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
    <tr>
        <td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
     </tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
如果没有加边框，效果如下：
在这里插入图片描述

05-鼠标移到行上时该行的颜色加深

可以利用类table-hover实现边框效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标指针悬停风格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-hover">
    <thead>
    <tr>
        <th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
    <tr>
        <td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
    <tr>
        <td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
     </tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

06-把表格的padding值缩减一半,使表格看起来更紧凑

利用类table-sm可把表格的padding值缩减一半,使表格看起来更紧凑
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>紧凑风格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-sm">
    <thead>
    <tr>
        <th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr>
    </thead>
    <tbody>
    <tr>
        <td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr>
    <tr>
        <td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr>
    <tr>
        <td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr>
     </tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
不缩减padding的效果如下：
在这里插入图片描述

07-为表格的行或单元格设置颜色

可以用下面这些类实现为行或单元格设置颜色：

  1. table-primary: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。

  2. table-secondary: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。

  3. table-success: 用于突出显示表格中的成功或正面信息，通常使用绿色。

  4. table-danger: 用于突出显示表格中的危险或错误信息，通常使用红色。

  5. table-warning: 用于突出显示表格中的警告或注意信息，通常使用黄色。

  6. table-info: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。

  7. table-light: 用于创建具有浅色背景的表格。

  8. table-dark: 用于创建具有深色背景的表格。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置表格背景的颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">以下为设置表格行的背景色</h2>
<table class="table">
    <tbody>
    <tr class="table-primary">
        <td>1. `table-primary`: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。</td>
    </tr>
    <tr class="table-secondary">
        <td>2. `table-secondary`: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。</td>
    </tr>
    <tr class="table-success">
        <td>3. `table-success`: 用于突出显示表格中的成功或正面信息，通常使用绿色。</td>
    </tr>
    <tr class="table-danger">
        <td>4. `table-danger`: 用于突出显示表格中的危险或错误信息，通常使用红色。</td>
    </tr>	
	    <tr class="table-warning">
        <td>5. `table-warning`: 用于突出显示表格中的警告或注意信息，通常使用黄色。</td>
    </tr>
    <tr class="table-info">
        <td>6. `table-info`: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。</td>
    </tr>
    <tr class="table-light">
        <td>7. `table-light`: 用于创建具有浅色背景的表格。</td>
    </tr>
    <tr class="table-dark">
        <td>8. `table-dark`: 用于创建具有深色背景的表格。</td>
    </tr>
    </tbody>
</table>

<h3 align="center">以下为设置表格的单元格的背景色</h2>
<table class="table">
	<tbody>
		<tr>
			<td class="table-primary">1-`table-primary`</td>
			<td class="table-secondary">2-`table-secondary`</td>
			<td class="table-success">3-`table-success`</td>
			<td class="table-danger">4-`table-danger`</td>
			<td class="table-warning">5-`table-warning`</td>
			<td class="table-info">6-`table-info`</td>
			<td class="table-light">7-`table-light`</td>
			<td class="table-dark">8-`table-dark`</td>
		</tr>
	</tbody>
</table>

</body>
</html>

运行效果如下图所示：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap

html

前端

Boostrap对HTML的表格的设计和优化 的相关文章

  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳

  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像

  • 如何在C#中使用默认浏览器打开带有锚点(#)的html文件

    我正在尝试在 C 中打开上下文帮助文件 当我没有指定锚点时 它工作得很好 Process Start C Help Help htm 但是当我指定锚点时 它不会打开 Process Start C Help Help htm Toc3420

  • JavaFX：在 WebView img 标签中未加载本地图像

    以下是我的代码 一切安好 我可以加载远程页面 我可以放置 HTML 内容 但我的img标签显示一个X标志表示无法加载图像 Note 我的图像与类位于同一个包中JavaFX在 Smiley 文件夹中 我可以列出所有图像 这意味着路径没有问题

  • 在 jQuery 中获取最接近元素的形式

    我编写了这个 js jquery 脚本来检查表单中的所有复选框 它工作得很好 但是这会检查页面上的所有复选框 无论它们是什么表单包装器 这是函数 function toggleCheck state var checkboxes jQuer

  • localStorage 获取 NULL？

    我不知道为什么 因为我之前已经这样做过并且工作正常 我认为这可能是因为浏览器问题 错误 localStorage setItem foo bar alert localStorage getItem foo 我使用的是 Firefox 3

  • 替换已弃用的“keypress” DOM 事件

    根据MDN 文章 https developer mozilla org en US docs Web Events keypress keypress事件已被弃用 但我在其他地方找不到任何关于我们是否应该在新项目中使用此事件的信息 如果不

  • 调整下拉框中列表的高度[重复]

    这个问题在这里已经有答案了 可能的重复 下拉框显示的高度 https stackoverflow com questions 5600982 height of the dropdown box display hi 如何调整下拉列表中列表

  • 在 Chrome 中，应用于包含图像的锚点的轮廓高度不正确

    对于我正在开发的网站 我希望当链接聚焦 悬停 活动时 链接周围会出现虚线轮廓 我希望文本和图像链接发生这种情况 我遇到的问题是 虽然我的代码在 Firefox 和 IE 中运行良好 但在 Chrome 7 0 517 41 中 虚线轮廓与我

  • 选中复选框时展开 Div

    我有一个复选框

  • 使用 Java 访问 HTML5 本地存储

    是否可以直接使用Java访问localstorage对象 如果是的话怎么办 更新 我知道 localstorage 是客户端 java 是服务器端 但我在网上读到 GWT 有 api 允许读取 localstorage 本地存储 顾名思义

  • 在 swift 3 的 textview 中显示属性文本？

    我想以斜体 粗体显示从服务器收到的文本 你好世界所以 responseObj text p b i hello i b i world gt i p if let postText String responseObj text as St

  • 交替 div 使图像向左（偶数）或向右（奇数）

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section

  • 如何实现右边缘倾斜的 div？ [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一

  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday

  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数？

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr

  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时

  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动

  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p

  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

随机推荐

  • 【python】Counter 函数的用法

    https docs python org 3 6 library collections html collections Counter 原文链接 https blog csdn net u010339879 article detai

  • 使用CocosBuilder2.1结合cocos2d-x2.0.3创建动画场景

    原文地址 http article ityran com archives 2140 本为由泰然教程组成员 浅底 原创 作为一位经验丰富的游戏开发人员 这次浅底将CocosBuilder经验分享给大家 希望大家喜欢 欢迎拍砖 转载请注明出处

  • yolov5加入CBAM,SE,CA,ECA注意力机制，纯代码（22.3.1还更新）

    本文所涉及到的yolov5网络为5 0版本 后续有需求会更新6 0版本 CBAM注意力 class ChannelAttention nn Module def init self in planes ratio 16 super Chan

  • 答辩准备细节 - 推荐第三本书很棒的书

    之前介绍了 PPT演讲力 重要时刻 不要输在表达上 和 金字塔原理 本次准备来介绍一本非常好的设计书 写给大家看的设计书 01 设计的必要性 写简历 做PPT等都可以用到 我们虽然不是专门的设计人员 但是我们仍然可以追求内容更好看 人们对于

  • XDOJ寻找最长的行

    寻找最长的行 类别 字符串 时间限制 1S 内存限制 1000Kb 问题描述 寻找若干行文本中最长的一行 输入说明 输入为多个字符串 每个字符串长度不超过100个字符 每个字符串占一行 输入的行为 end 时表示输入结束 输出说明 输出其中

  • Elasticsearch 实现分组统计

    之前有个查询es分组求和的需求 类似关系型数据库 select a b sum c from table group by a b 当时用DSL查询语句实现 这边记录下 GET my index my type search from 0

  • C++中new与delete问题学习

    C 中new与delete问题学习 一 new char与delete问题 1 问题程序 include

  • 普歌-云言团队-Spring的AOP简介

    什么是AOP AOP 为 Aspect Oriented Programming 的缩写 意思为面向切面编程 是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 AOP 是 OOP 的延续 是软件开发中的一个热点 也是Spri

  • 【ES实战】索引mapping的动态设置

    动态mapping 文章目录 动态mapping 动态mapping规则 语法规则 match mapping type match and unmatch match pattern path match and path unmatch

  • signature=8a03839902ac8eb66fcf33ab62032d86,swch-20200612

    0001710583 20 000020 txt 20200618 0001710583 20 000020 hdr sgml 20200618 20200618161953 ACCESSION NUMBER 0001710583 20 0

  • 了解Nginx配置文件结构与配置上下文

    提供 ZStack云计算 系列教程 本教程为如何在Ubuntu 14 04上实现Nginx与LEMP系列四篇中的第四篇 内容介绍 Nginx是一套高性能Web服务器 负责处理互联网上各大型站点的日常负载 其特别擅长处理高并发连接与大量静态内

  • c++语法

    文章目录 0 0 编译运行 单个程序编辑调试 库文件编译调试 1 变量 1 1 变量的声明和定义 1 2 变量的作用域 1 3 namespace命名空间 标准空间std 2 关键字 2 1 extern 3 常量 1 define 定义

  • 插值1算法

    一 基本概念 插值是指通过对数据进行线性 非线性或其他类型的逼近 将一组离散数据映射到连续的函数值 在数学中 插值通常用于将数据点连接起来 以形成连续的函数图像 特别是在数值计算和图像处理中 插值可以用于在空间中预测对象的位置 速度和加速度

  • Unity&Shader案例篇—绘制雨滴

    一 前言 转载请注明出处凯尔八阿哥专栏 惯例先上效果图 本文不只是简单的绘制雨滴 同时处理了摄像机不同朝向看到的雨滴下落的方向也不一样 二 方法 1 绘制雨线 绘制雨使用的是C 脚本绘制的 脚本为 using UnityEngine usi

  • 测试之自动化测试

    详细Python教程见 http www liaoxuefeng com wiki 0014316089557264a6b348958f449949df42a6d3a2e542c000 0014316090478912dab2a3a9e8f

  • 【金九银十】软件测试中的高频面试题梳理（内附答案）

    写数据库语句 一个老师表 一个学生表 1 查李老师班的小明 2 并将小明的年纪改成26 select t1 from 学生表 t1 jion 老师表 t2 on t1 班级 t2 班级 where t1 姓名 小明 and t2 姓名 李老

  • vue阻止弹窗_vue 弹窗禁止底层滚动

    原因 底层视图高度超出百分百 加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层 处理 打开弹窗后禁止底层滚动调用stop事件 关闭则开启底层滚动调用move事件 let mo function e e preventDefau

  • 实时流协议(RTSP) 来自 维基百科

    https zh wikipedia org wiki E5 8D B3 E6 99 82 E4 B8 B2 E6 B5 81 E5 8D 94 E5 AE 9A 目录 协议指令 OPTIONS 请求 DESCRIBE 请求 SETUP 请

  • stat()/lstat()的使用

    stat 函数和lstat 函数都是用于获取文件或目录的信息的函数 它们可以返回包含文件或目录的各种属性的结构体 这里是关于这两个函数的使用方法的简要说明 stat 函数 include

  • Boostrap对HTML的表格的设计和优化

    目录 01 Bootstrap的默认表格风格 02 没有边线 边界的表格 03 行与行的背景颜色交替变换 条纹样式 04 给表格加上边框效果 05 鼠标移到行上时该行的颜色加深 06 把表格的padding值缩减一半 使表格看起来更紧凑 0

热门标签