Table Bootstrap的显示效果不佳-HTML和CSS
[英]Table Bootstrap doesn't show up well - HTML & CSS
问题描述
I have a table here: http://americanbitcoinacademy.com/test/table.html 
我在这里有一张桌子： http : //americanbitcoinacademy.com/test/table.html
And I am using bootstrap. 我正在使用引导程序。 Right now it doesn't show the way this page: http://v4-alpha.getbootstrap.com/content/tables/#table-head-options actually does. 现在，它并没有显示此页面的方式： http : //v4-alpha.getbootstrap.com/content/tables/#table-head-options实际上确实如此。
Here's my code: 这是我的代码：
<section class="section-padding extra-margin-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-responsive">
<thead class="thead-inverse">
<tr>
<th>Student ID</th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Subjects</th>
<th>Teachers</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo, @sds</td>
<td>@mdo, Geoms</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>@fat</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@fat</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@fat</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>@fat</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I was wondering what went wrong why I cannot get the same exact styles like this: http://v4-alpha.getbootstrap.com/content/tables/#table-head-options 我想知道哪里出了问题，为什么我不能得到相同的样式： http : //v4-alpha.getbootstrap.com/content/tables/#table-head-options
And how can I attain such the same exact look? 而我如何获得相同的外观？
Note: I used bootstrap.min.css already you can use Chrome's inspector element to check it out. 注意：我已经使用bootstrap.min.css了，您可以使用Chrome的inspector元素将其检出。
5 个解决方案
解决方案1
2 2017-01-24 08:19:51
You can add background color and font color to class thead-inverse. 您可以添加背景色和字体颜色以对thead-inverse进行分类。
.thead-inverse{
background: black;
color: white;
}
you will get same look. 您将拥有相同的外观。
解决方案2
1 2017-01-24 08:22:39
you ref bootstrap 3.3.1 in your site, but the sample you compare with is from bootstrap 4 alpha! 您在站点中引用了bootstrap 3.3.1，但您与之比较的示例来自bootstrap 4 alpha！
Use this css ref for bootstrap 4 alpha: 使用此CSS参考作为bootstrap 4 alpha：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
It is obvious that you can also download and use it as a local css in your site. 显然，您也可以下载它并将其用作站点中的本地CSS。 There is a class inside that css to set background of thead-inverse th to a dark color: 内部有一个CSS类将thead-inverse th背景设置为深色：
.thead-inverse th {
color: #fff;
background-color: #292b2c;
}
Here is your html with proper stylesheet link reference: 这是带有适当的样式表链接参考的html：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <section class="section-padding extra-margin-top"> <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover table-responsive" style="display: table;"> <thead class="thead-inverse"> <tr> <th>Student ID</th> <th>Username</th> <th>First Name</th> <th>Last Name</th> <th>Subjects</th> <th>Teachers</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>@mdo, @sds</td> <td>@mdo, Geoms</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> </tbody> </table> </div> </div> </div> </section>
解决方案3
1 已采纳 2017-01-24 08:25:32
添加引导程序样式表位置（如果您在本地系统中），或者从其站点提供其位置<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>
解决方案4
1 2017-01-24 08:28:26
They're adding some extra element with different styles like bd-example class. 他们添加了一些其他样式不同的元素，例如bd-example类。 here is the changes I made. 这是我所做的更改。
body { background: #fff; } .bd-example { position: relative; margin: 1rem -1rem; border: solid #f7f7f9; padding: 1.5rem; margin-right: 0; margin-bottom: 0; margin-left: 0; border-width: .2rem; } table { border-collapse: collapse; background-color: transparent; } .table { width: 100%; max-width: 100%; margin-bottom: 1rem; } thead th { color: #fff; background-color: #292b2c; } .table thead th { vertical-align: bottom; border-bottom: 2px solid #eceeef; } .table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid #eceeef; }
<section class="section-padding extra-margin-top"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="bd-example"> <table class="table table-hover table-responsive"> <thead class="thead-inverse"> <tr> <th>Student ID</th> <th>Username</th> <th>First Name</th> <th>Last Name</th> <th>Subjects</th> <th>Teachers</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>@mdo, @sds</td> <td>@mdo, Geoms</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td>@fat</td> <td>@fat</td> </tr> </tbody> </table> </div> </div> </div> </div> </section>
解决方案5
0 2017-01-24 09:41:28
Your code work proper for table.if you have bootstrap in your local system. 如果您的本地系统中有引导程序，则您的代码可正常用于table.。 just make sure your bootstrap stylesheet and js path location will be in correct format between head tags. 只要确保您的引导程序样式表和js路径位置在head标签之间的格式正确即可。 or you can give its location from their site: 或者，您可以从他们的网站上提供其位置：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script
</head>
your code work fine with this have a look: https://codepen.io/anon/pen/apwaXJ 您的代码可以正常工作，请看一下： https : //codepen.io/anon/pen/apwaXJ
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.