Twitter中的圆桌Bootstrap 3 [英] Rounded tables in Twitter Bootstrap 3
本文介绍了Twitter中的圆桌Bootstrap 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Bootstrap 3在桌子上放了圆角。当我应用 .table-bordered
类时,我应该应用哪些样式来让他们回来?
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered
class, please?
strong> UPDATE
UPDATE
到目前为止,我来看这段代码,没有任何效果。
So far I've come to this code, with no effect.
从Bootstrap 2.3.2获取的CSS:
CSS taken from Bootstrap 2.3.2:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
HTML代码:
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th style="width: 50%">
Config. Name
</th>
<th>
API Calls
</th>
<th>
Current Amount
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/searchsources/details">Agennda</a>
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
<a href="/searchsources/details">Edit</a>
</td>
</tr>
</tbody>
</table>
推荐答案
如果你用一个面板包围表格,
If you surround the table with a panel you get your rounded corners.
像这样:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
这篇关于Twitter中的圆桌Bootstrap 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文