Bootstrap 表格 css样式
刚开始接触Bootstrap,发现有些Bootstrap 表格类在Bootstrap4与Bootstrap3存在一些问题(这种不知道属于什么问题,希望知道的大佬告知,谢谢)
例如,
.table-striped
我在荣耀MagicBook中测试(其它电脑测试无问题),各种浏览器在Bootstrap3中都无效,而Bootstrap4则生效;.table-condensed
在Bootstrap3中生效,在Bootstrap4中无效;
通过查看Bootstrap3&4的css源码发现:
.table-striped
在荣耀MagicBook中测试,其它电脑测试无问题,至于为什么Bootstrap3在荣耀MagicBook 中无效果,这个还不清楚是什么问题;
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
通过查看Bootstrap4css源码, 发现.table-striped
是有设置背景颜色样式的。
.table-condensed
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
在Bootstrap3中.table-condensed
是有padding:5px;样式的,所以会生效让表格更加紧凑;
而在Bootstrap4中,我并没有找到有.table-condensed
这个类。
具体代码如下:
Bootstrap3表格 css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>表格</h2>
<p>联合使用所有表格类:</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bootstrap4表格 css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>表格</h2>
<p>联合使用所有表格类:</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
还有等等一些其它的类,都存在因版本不同而导致效果无法显示的问题。。。这里就不一一列举了