CSS通用样式3——表格

2024-05-09 05:46:25

基本实例：

在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。
Bootstrap对表格进行了优化，通过给<table>元素应用.table类样式便可以得到一个优化的基本的表格。如下图：

表头选项

在表头中可以使用thead-light类、thead-dark类分别使<thead>的背景颜色变成浅灰色、深灰色

给表头<thead>添加.thead-light类样式示例

条纹状表格

给<table>添加.table-striped类样式，可以给表格中<tbody>元素内的任一行添加斑马条纹样式

带边框的表格

给<table>元素添加.table-bordered类样式，可以将表格中的每个单元格增加边框样式

无边框的表格

给<table>元素添加.table-boardeless类样式，得到一个没有边框的表格

鼠标指针悬停

给<table>元素添加.table-hover类样式，当鼠标放到，<tbody>元素内的任一行时都会产生悬停的效果

状态类：

Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。状态类设置的是<tr>、<td>或<th>元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。

响应式表格

通过把任意的table包装在.table-responsive类内，可以创建响应式表格。即当表格水平溢出时出现水平滚动条。

CSS通用样式3——表格相关推荐

CSS 通用样式总结
CSS 通用样式总结 1. CSS中英文样式换行 p {/* 两边对齐 */text-align: justify;/* normal-默认 break-all-允许在单词内换行 keep-all在半 ...
CSS通用样式2——Flex布局
Bootstrap4与Bootstrap3最大的区别是Bootstrap 4使用弹性盒子来布局,而不是使用浮动来布局.弹性盒子也是CSS的一种新的布局模式,更适合响应式的设计. 一.定义弹性盒子使用 ...
Bootstrap中CSS通用样式——排版，列表，代码，图片
一.排版标题: 在Bootstrap4中,主要对标题样式做了如下规定: (1)重设上下外边距,margin-top值为0,margin-bottom:0.5rem. (2)固定所有标题行高为line ...
Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市请选择您所在的城市中山市太原市广州市 CSS样式 .sel_wrap{ height ...
php表格好看样式,怎么用css制作好看的表格？【示例】
本篇文章将要给大家详细介绍如何用css制作出好看又简洁的HTML表格.相信大家在接触过HTML相关知识后,或多或少都会自己写点小代码,写个小效果.就比如table表格,我们在浏览各个网站时,总能看到各 ...
css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
css 通用全局,通用全局CSS样式
PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...

最新文章

热门文章