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 class="table"><caption>普通表格</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>

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1923526

bootstrap-表格-普通表格相关推荐

【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
BootStrap Table：表格参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 引入BootStrap Table 引入 bootstrap.c ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
jquery+bootstrap 创建日历表格
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好欢迎留言赐教 <meta charset="utf-8"><meta na ...
Bootstrap笔记(十一) 表格篇
表格篇表格样式与效果表格内容的垂直对齐方式特定意义色彩类别响应式表格参考资料表格样式与效果 Bootstrap提供以下类别用来设定表格样式与效果: 範例1: 表格与标题使用 .tab ...
html 自动生成表格,HTML 表格生成
无标题文档 //var str=' Bill Gates '; /*表格头 function init(row, col) { var str=' for(var i=1;i<=row;i++) ...
wordpress自适应表格_给WordPress添加自适应表格让表格自适应屏幕
wordpress自带的表格不能自适应屏幕宽带,每次新建了表格,电脑上显示正常的,结果换到手机上就超出屏幕宽度了,很麻烦,更重要的是很不美观,本次我就问为大家带来一个添加自适应表格的教程. 案列分析 ...
python处理表格数据-python读取word 中指定位置的表格及表格数据
1.Word文档如下: 2.代码 # -*- coding: UTF-8 -*- from docx import Document def readSpecTable(filename, specT ...

bootstrap-表格-普通表格

1.运行效果如图所示

2.实现代码如下

bootstrap-表格-普通表格相关推荐

最新文章

热门文章