css3 – Rounded表在Twitter Bootstrap 3

前端之家收集整理的这篇文章主要介绍了css3 – Rounded表在Twitter Bootstrap 3前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Bootstrap 3在桌子上放了圆角。当我应用.table-bordered类时,我应该应用哪些样式来让他们回来?

更新

到目前为止,我来到这个代码,没有效果

从Bootstrap获取的CSS 2.3.2:

  1. .table-bordered
  2. {
  3. -webkit-border-radius: 4px;
  4. -moz-border-radius: 4px;
  5. border-radius: 4px;
  6. }
  7.  
  8. .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
  9. {
  10. -webkit-border-top-left-radius: 4px;
  11. border-top-left-radius: 4px;
  12. -moz-border-radius-topleft: 4px;
  13. }
  14.  
  15. .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
  16. {
  17. -webkit-border-bottom-left-radius: 4px;
  18. border-bottom-left-radius: 4px;
  19. -moz-border-radius-bottomleft: 4px;
  20. }

HTML代码

  1. <table class="table table-hover table-responsive table-bordered">
  2. <thead>
  3. <tr>
  4. <th style="width: 50%">
  5. Config. Name
  6. </th>
  7. <th>
  8. API Calls
  9. </th>
  10. <th>
  11. Current Amount
  12. </th>
  13. <th>
  14. Actions
  15. </th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19. <tr>
  20. <td>
  21. <a href="/searchsources/details">Agennda</a>
  22. </td>
  23. <td>
  24. 2,876
  25. </td>
  26. <td>
  27. $ 80.67
  28. </td>
  29. <td>
  30. <a href="/searchsources/details">Edit</a>
  31. </td>
  32. </tr>
  33. </tbody>
  34. </table>

解决方法

如果你用一个面板围绕桌子,你会得到你的圆角。

喜欢这个:

  1. <div class="panel panel-default">
  2. <table class="table table-bordered">
  3. ....
  4. </table>
  5. </div>

猜你在找的CSS相关文章