1-16. Bootstrap中表格问题详解

最新推荐文章于 2022-06-27 10:27:17 发布

ROBIN.FANG

最新推荐文章于 2022-06-27 10:27:17 发布

阅读量243

点赞数

分类专栏： jQuery Library

本文链接：https://blog.csdn.net/weixin_38134491/article/details/86417896

版权

jQuery Library 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

Bootstrap表格

表格类

<tr>, <th> 和 <td> 类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
		
		<style type="text/css">
			table{
				width:100%;
				font-size: 18px;
				line-height: 45px;
			}

            td{
                mid-width:500px;  //最小宽度为500
              }

		</style>
	</head>
	<body>
		<div class="container">
		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
					<td>中国军事</td>
					<td>美国军事</td>
					<td>俄罗斯军事</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="active">江苏军事</td>
					<td>浙江军事</td>
					<td class="success">重庆军事</td>
				</tr>
				
				<tr>
					<td class="info">江苏军事</td>
					<td class="warning">浙江军事</td>
					<td class="danger">重庆军事</td>
				</tr>
				
				<tr>
					<td>江苏军事</td>
					<td>浙江军事</td>
					<td>重庆军事</td>
				</tr>
			</tbody>
		</table>
		</div>
			
		
		<script src="Bootstrap/js/bootstrap.js"></script>	
		<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
	</body>
</html>

效果如下：

把table表格包在含table-responsive class的div内，可以让表格水平滚动以适应小型设备

ROBIN.FANG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-16. Bootstrap中表格问题详解

Bootstrap表格表格类<tr>, <th> 和 <td> 类<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link href="Boo...
复制链接

扫一扫

专栏目录