Bootstrap之表格

我心V飞翔 我心V飞翔 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄16年
关注
转载 最新推荐文章于 2026-05-07 08:32:55 发布 1k 阅读 AI 写同款· GEO 优化 ›
ccs制作表头有斜线的表格 使用css制作表头带有斜线分隔的表格，并基于Bootstrap 自适应 立即下载

基本实例

为任意<table>标签添加.table类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>

条纹状表格

通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。

<table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>

带边框的表格

添加.table-bordered类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>Otto</td>
          <td>@TwBootstrap</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>

鼠标悬停

通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>


紧缩表格

通过添加.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

<table class="table table-condensed">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>


状态类

通过这些状态类可以为行或单元格设置颜色。

Class            描述

.active           鼠标悬停在行或单元格上时所设置的颜色

.success        标识成功或积极的动作

.info               标识普通的提示信息或动作

.warning        标识警告或需要用户注意

.danger          标识危险或潜在的带来负面影响的动作

<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Column heading</th>
          <th>Column heading</th>
          <th>Column heading</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>1</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="success">
          <td>3</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="info">
          <td>5</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="warning">
          <td>7</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="danger">
          <td>9</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
</table>


源地址： http://blog.youkuaiyun.com/itmyhome1990/article/details/37763551

收录于
web前端

当前文章被收录于：

web前端
40 篇文章 0 人学习
订阅专栏 查看详情
Bootstrap

当前文章被收录于：

Bootstrap
1 篇文章 0 人学习
订阅专栏 查看详情
Html中用table画斜线 开发Web项目过程中会遇到在table中画斜线的情况. 例如: 成绩和学员之间在一个td中, 需要用斜线来隔开. 自己下载试试吧 立即下载

相关推荐

斜线表头制作

斜线表头制作

table表头斜线

一、代码<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post"><!DOCTYPE html><br> <html> <br> <head> <br> <meta http-equiv="Conten

front_end_fan 9746

jquery 表格斜线

使用jquery绘制表格斜线，表格头斜线，无需使用图片。

table表格表头单元格添加斜线

table表格表头单元格添加斜线

LiuCabbage 1352

5种做法实现table表格中的斜线表头效果

table表格，这个东西大家肯定都不陌生，代码中我们时常都能碰到，那么给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？ 我总结了以下几种方法： 1、最最最简单的做法 直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！ 2、相当简单的做法 其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的兼容性问题，大家心里要要时刻保持着危机意识（IE还存在呢），如果你们公司的要求是只兼容chrome，那么，这个方法很适合你。 3、十分简单的做法

【原创】Ubuntu20.04 安装 Isaac Gym 仿真器

Ubuntu20.04 安装 Isaac Gym

qq_54900679的博客 3094

Bootstrap 之Table样式

将标签添加class=‘table’ 类后的样式 [html] view plain copy html>   head>       meta name="viewport" content="width=device-width" />       title>Table样式title>          link href="~/

young的博客 1391

一文搞懂深度学习：最全神经网络介绍

本文是深度学习系列文章的第二篇，我们将深入探讨各种类型的人工神经网络，探索它们独特的特性和应用。

2402_82802238的博客 2801

bootstrap 表格的使用，form表单的使用

<table class="table table-striped table-bordered table-hover"> <thead> <tr> <td>#</td> <td>First Name</td> <td>Last Name</td> ...

danniyedan的博客 235

基于AR和SLAM技术的商场智能导视系统技术原理详解

本文针对智慧商场室内导航需求，提出基于AR和SLAM技术的商场智能导视系统技术方案，实现了沉浸式导览体验并促进消费转化，助力商场运营升级。

维小帮定位导航的博客 1243

WPS和Excel通用！省市区四级联动下拉菜单保姆级教程（附最新行政区划数据包）

本文详细介绍了在WPS和Excel中实现省市区四级联动下拉菜单的完整教程，包含2024年最新行政区划数据的获取与整理方法。通过名称管理器和INDIRECT函数的组合，以及WPS的特色功能，帮助用户高效准确地录入四级行政区划信息，提升数据录入效率并减少错误。

s1t2u3的博客 611

Bootstrap表格

如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格，如你想要快速建立一个传统的表格，那就建议选择layui表格，layui表格它可以实现数据的动态化，但是它如果存在过多的列，并且当屏幕缩小比例的话，那么它就会将表格压缩，这样找起数据会比较麻烦。使用Bootstrap表格也就意味着任何嵌套表格都将以与父类型相同的方式进行样式化，Bootstrap 4 继承了所有的表格样式，它样式是根据class来实现的，那它到底还有哪些样式呢？9、这也就是上面例子使用的表格水平响应，代码如图3。

2401_89828658的博客 453

Uni-App推送踩坑实录：从云函数URL化到后台推送失效，我都经历了什么

本文详细记录了Uni-App开发者在接入uni-push 2.0时遇到的推送失效问题，从云函数URL化到后台推送失效的完整排查过程。通过系统化分析和与官方沟通，最终找到解决方案，并分享了预防措施与最佳实践，帮助开发者避免类似问题。

weixin_42552716的博客 487

Bootstrap 表格

Bootstrap 表格提供了一套完整的样式和工具类，用于创建美观、响应式的数据表格。核心功能包括基础样式（.table）、条纹行（.table-striped）、边框控制（.table-bordered/.table-borderless）、悬停效果（.table-hover）和颜色变体（如.table-primary）。支持响应式布局（.table-responsive）确保在小屏幕设备上正常显示，还可通过Sass变量深度定制表格样式。Bootstrap表格简化了HTML表格的样式开发，同时保证了良好的

m0_57545130的博客 980

别再只盯着充电功率了！从PWM信号到PLC通信，一文读懂CCS2充电桩如何跟你家电动车“聊天”

本文深入解析了CCS2充电桩与电动汽车之间的12次关键通信交互，从硬件握手到PLC加密通信，再到充电参数动态协商与安全校验。通过详细的技术细节和实时交互逻辑，揭示了现代快充技术如何实现高效安全的能量传输，帮助用户理解充电过程中的核心技术要点与故障排查方法。

weixin_30527323的博客 142

微信小程序 - 解决报错 operateAudio:fail audioInstance is not set（wx.getRecorderManager苹果ios真机调试运行，播放音频播放出错解决）

微信小程序，苹果ios系统，真机测试报错，播放音频报错operateAudio:fail audioInstance not exist，errCode: -1，小程序生成音频播放报错errMsg，真机调试报错开发者工具没问题，wx.getRecorderManager，音频实例，InnerAudioContext，各种方法都试了不行，只有ios苹果手机有这个问题，IOS 出现 operateAudio，在iOS无法播放的解决方案，更新到最新版本了还是不行，链接没有特殊字符，微信小程序全局音频设置,手机上播

🏆 前端领域优质创作者 1万+

Bootstrap5 表格

表格是网页中常见的元素，用于展示数据。Bootstrap5 提供了丰富的表格样式和功能，使得表格的创建和定制变得更加简单。Bootstrap5 表格功能强大，可以帮助开发者快速创建美观、易用的表格。通过合理运用表格组件和样式，可以满足各种场景下的需求。希望本文对您有所帮助。

lsx202406的博客 398

LoRA 完整解析：从理论到实践

LoRA（低秩适应）是一种高效的大模型微调方法，通过添加少量可训练参数（低秩矩阵）来适配新任务，避免全参数微调的高成本。其核心是将权重更新ΔW分解为两个小矩阵B×A的乘积，大幅减少训练参数量（仅0.1-1%）。LoRA基于内在维度假设，通过低秩约束捕捉核心任务信息，兼具效率与效果。实际应用中，常用配置为秩r=16-32，目标模块选择注意力层的q_proj和v_proj，学习率比全参数微调大10倍（约1e-4）。优势包括参数高效（内存降低60-80%）、多任务适配灵活、保留预训练知识等，已成为大模型微调的主流

echo的博客 1412

bootstrap中表格大小设置_Bootstrap指定表格字段宽度

默认情况下，表格会占据屏幕所有宽度，可以使用bootstrap的布局功能。但表格标题字段的宽度必须与相应字段内容的宽度一致。 //一行被分成12列，超过12列，将转移到下一行。实例如下：@using (Html.BeginForm("Index", "Course", FormMethod.Get, new { @class = "form-inline", role = "form" })){课...

weixin_39900736的博客 3387

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0， 兼容Win7/Win10/WinXP，解压就可用。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

BootStrap-表格

6.1 基本表格 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页编码的类型--> <meta charset="utf-8"> <!--使用最新的支持H5浏览器内核来解析--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

hxy1625309592的博客 187

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

JS中BootStrap效果的运用——表格打印

描述： JS中BootStrap效果的运用——表格打印 主要是引用文件，教程https://blog.youkuaiyun.com/qlwangcong518/article/details/86032763 效果： 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...

进击的葱 2194

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

bootstrap表格使用

bootstrap表格使用 第一点：bootstrap tab好用,并且是前端分页（就是不需要去读后台数据库来辅助分页） 你下载了bootstrap，不是你就有了bootstrap table插件，你还得要下载bootstrap table插件； bootstrap下载地址：http://www.bootcss.com/ bootstrap table插件下载地址（下面3个有关）最好是从Githu...

xxaann的博客 737

Bootstrap4 表格

在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。通过添加 .table-striped 类，您将在。.table-bordered 类可以为表格添加边框。

unber的博客 858
上一篇： jQuery表格排序组件-tablesorter
下一篇： jQuery验证控件jquery.validate.js使用说明+中文API
点赞 0
评论 0
书签 书签 0
我心V飞翔
我心V飞翔
博客等级 码龄16年 55粉丝 82原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值