Bootstrap 3在桌子上放了圆角。当我应用.table-bordered类时,我应该应用哪些样式来让他们回来?
更新
从Bootstrap获取的CSS 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;
- }
- <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>
解决方法
如果你用一个面板围绕桌子,你会得到你的圆角。
喜欢这个:
- <div class="panel panel-default">
- <table class="table table-bordered">
- ....
- </table>
- </div>