bootstrap-表格-紧凑表格

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>表格</title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" 
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
	crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" 
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
	crossorigin="anonymous">
</head>
<body>
	<!-- 紧凑表格 .table-condensed -->
	<table class="table table-condensed">
		<caption>紧凑表格 .table-condensed</caption>
		<thead>
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>学历</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>小小</td>
				<td>23</td>
				<td>女</td>
				<td>大专</td>
			</tr>
			<tr>
				<td>2</td>
				<td>允允</td>
				<td>23</td>
				<td>女</td>
				<td>大专</td>
			</tr>
			<tr>
				<td>3</td>
				<td>朔朔</td>
				<td>26</td>
				<td>男</td>
				<td>大专</td>
			</tr>
			<tr>
				<td>4</td>
				<td>单单</td>
				<td>24</td>
				<td>女</td>
				<td>大专</td>
			</tr>
		</tbody>
	</table>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
	crossorigin="anonymous"></script>
</body>
</html>
时间： 2024-10-13 09:33:33

bootstrap-表格-紧凑表格的相关文章

Bootstrap &lt;基础五&gt;表格

Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的表格单元格. <t

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

MVC打印表格,把表格内容放到部分视图打印

假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.print()只会打印整页的内容,何不把表格放在一个部分视图中,在部分视图中再调用window.print()方法. Model很简单: public class Student { public int Id { get; set; } public string Name { get; set; } public dec

BootStrap的table表格，栅格系统，form表单的样式

BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用BootStrap,有什么特点 l  学习比较简单,有了Html,css和js就能学习 l  响应式布局,可以适应多种的设备 l  移动设备优先 BootStrap的使用 环境的安装 官网上下载包 要想使用bootStrap 必须加载jquery bootStrap的基本模板 1.     Html文

Bootstrap系列 -- 9. 表格

一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-striped:斑马线表格 3. .table-bordered:带边框的表格 4. .table-hover:鼠标悬停高亮的表格 5. .table-condensed:紧凑型表格 6. .table-responsive:响应式表格 二. Bootstrap 行样式 <table class="ta

bootstrap 多色表格

有时候需要用到多色显示不同类型的表格 用bootstrap的样式即可 <tr class="active"> <tr class="success"> <tr class="warning"> <tr class="danger"> 学习源头:http://www.runoob.com/bootstrap/bootstrap-tables.html 原文地址:https://ww

bootstrap 3 之 表格（table的各种样式）

1.table-striped:斑马线表格 2.table-bordered:带边框的表格 3.table-hover:鼠标悬停高亮的表格 4.table-condensed:紧凑型表格(单元格的内距由8px调至5px.) 5.table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条.当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失) 6.“.table”主要有三个作用: ?  给表格设置了margin-bottom:20px以

ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧

这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css"

二、制作BOM表格--物料表格--Bill of Materials

公司会根据这个表格进行相关元器件的采购--以及后期的贴片上彩 操作: .dsn--Tools--Bill of Materials 出现如下对话框--默认设置--勾选--使用Excel打开 顺序--数量--位号--值 对应--四项条目--大括号里面--系统里面相关的一些关键字--系统根据这些关键字--调用一些值--显示在Excel表格里 可根据需要--进行更改--如:显示封装 若出现如下错误--说明Excel窗口没有关闭--关闭后可正常生成