Twitter Bootstrap 3 中的圆桌会议

Posted 2023-03-06

【中文标题】Twitter Bootstrap 3 中的圆桌会议

【英文标题】：Rounded tables in Twitter Bootstrap 3

【发布时间】：2013-09-14 19:06:02

【问题描述】：

Bootstrap 3 已在表格上丢弃了圆角。请问当我申请.table-bordered 课程时，我应该应用哪些样式来恢复它们？

更新

到目前为止，我已经来到了这段代码，没有任何效果。

CSS 取自 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>

【参考方案1】：

如果你用面板围绕桌子，你会得到圆角。

像这样：

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>

【讨论】：

我不得不删除第一行单元格的顶部边框，但效果很好。谢谢！

是的，这确实有效，并且似乎在不同分辨率下响应

很好......这应该是真正的答案。

我喜欢这种意外！

面板现在是 bootstrap 4 中的卡片。所以只需将 <div class="panel panel-default"> 替换为 <div class="card">。此外，在表格周围创建另一个嵌套的 div 作为卡片主体将使它看起来更干净<div class="card-body">

【参考方案2】：

"table-responsive" 放在一个包裹桌子的 div 上，而不是放在桌子本身上。

在 normalize.less 中有包含border-collapse:collapse 的表格重置。这不在 Bootstrap 的 2.x 中。由于这个新的重置，没有圆角，因为它们必须是边框折叠：分离。您必须创建一个单独的课程并进行相应的设置。

       <table class="table table-curved">

仅适用于“table-hover”和“table-striped”而非表格边框。边框包含在此样式中。

.table-curved 
    border-collapse: separate;

.table-curved 
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;

.table-curved td, .table-curved th 
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;

.table-curved th 
    border-top: none;

.table-curved th:first-child 
    border-radius: 6px 0 0 0;

.table-curved th:last-child 
    border-radius: 0 6px 0 0;

.table-curved th:only-child
    border-radius: 6px 6px 0 0;

.table-curved tr:last-child td:first-child 
    border-radius: 0 0 0 6px;

.table-curved tr:last-child td:last-child 
    border-radius: 0 0 6px 0;

少

  //  Added Rounded Corner Tables 
.table-curved 
  border-collapse: separate;
  border: solid @table-border-color 1px;
  border-radius: @table-radius;
  border-left:0px;

    td, th 
      border-left: 1px solid @table-border-color;
      border-top: 1px solid @table-border-color;
    

    th 
      border-top: none;
    

    th:first-child 
      border-radius: @table-radius 0 0 0;
    

    th:last-child 
      border-radius: 0 @table-radius 0 0;
    

    th:only-child
      border-radius: @table-radius @table-radius 0 0;
    

    tr:last-child td:first-child 
      border-radius: 0 0 0 @table-radius;
    

    tr:last-child td:last-child 
      border-radius: 0 0 @table-radius 0;
    

【讨论】：

有帮助！我需要设置它没有内部边界，这似乎很棘手。对此有什么想法吗？

这是完美的答案！如果放大，标记的答案将不起作用

【参考方案3】：

使用克里斯蒂娜的回答和这个thread ，我想出了这个 CSS 来获得有或没有 THEAD 的表格中的圆角。

.table-curved 
   border-collapse: separate;
   border: solid #ccc 1px;
   border-radius: 6px;
   border-left: 0px;
   border-top: 0px;

.table-curved > thead:first-child > tr:first-child > th 
    border-bottom: 0px;
    border-top: solid #ccc 1px;

.table-curved td, .table-curved th 
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;

.table-curved > :first-child > :first-child > :first-child 
    border-radius: 6px 0 0 0;

.table-curved > :first-child > :first-child > :last-child 
    border-radius: 0 6px 0 0;

.table-curved > :last-child > :last-child > :first-child 
    border-radius: 0 0 0 6px;

.table-curved > :last-child > :last-child > :last-child 
    border-radius: 0 0 6px 0;

【讨论】：

工作正常，除了在 thead 或 tfoot 中只有一列的表格。如果您打算使用 colspan="100%"，则需要包含以下 CSS 规则： .table-curved > :first-child > :first-child > :first-child:last-child border-radius: 6像素 6像素 0 0; .table-curved > :last-child > :last-child > :first-child:last-child border-radius: 0 0 6px 6px;

【参考方案4】：

我假设您没有使用源less-files。但是，在 normalize.less 中，bootstrap 3.0RC 正在添加：

// ==========================================================================
// Tables
// ==========================================================================

//
// Remove most spacing between table cells.
//

table 
  border-collapse: collapse;
  border-spacing: 0;

这个边框折叠的东西破坏了桌子上的圆形边框。 因此，只需在表格边框中覆盖它即可打开效果：

.table-bordered

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    border-collapse: inherit;

我认为它可能有效。

【参考方案5】：

下面这个对我来说效果很好：

.table-curved 
    border-collapse: separate;

.table-curved 
    border: solid #ccc 1px;
    border-radius: 6px;

.table-curved td, .table-curved th 
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;

.table-curved tr > *:first-child 
    border-left: 0px;

.table-curved tr:first-child > * 
    border-top: 0px;

虽然它当然不适用于嵌套表。

【参考方案6】：

为了方便起见：

.table-curved 
    border-collapse: separate;
    border: solid @table-border-color 1px;
    border-radius: @border-radius-base;
    border-left: 0px;
    border-top: 0px;
    > thead:first-child > tr:first-child > th 
        border-bottom: 0px;
        border-top: solid @table-border-color 1px;
    
    td, th 
        border-left: 1px solid @table-border-color;
        border-top: 1px solid @table-border-color;
    
    > :first-child > :first-child > :first-child 
        border-radius: @border-radius-base 0 0 0;
    
    > :first-child > :first-child > :last-child 
        border-radius: 0 @border-radius-base 0 0;
    
    > :last-child > :last-child > :first-child 
        border-radius: 0 0 0 @border-radius-base;
    
    > :last-child > :last-child > :last-child 
        border-radius: 0 0 @border-radius-base 0;
    

【参考方案7】：

这是另一种可能比上述解决方案简单得多的解决方案。这将选择第一个和最后一个 th 元素并在它们各自的角上应用边框。然后，您可以将半径添加到整个表格。

.table 
  border-radius: 5px;

th:first-of-type 
  border-top-left-radius: 5px;

th:last-of-type 
  border-top-right-radius: 5px;

【参考方案8】：

如果您在第一行或最后一行只有一个单元格，则此单元格将起作用。

（添加了对 Ruben Stolk 的代码的修复）

.table-curved 
  border-collapse: separate;
  border: solid @table-border-color 1px;
  border-radius: @border-radius-base;
  border-left: 0px;
  border-top: 0px;
  > thead:first-child > tr:first-child > th 
    border-bottom: 0px;
    border-top: solid @table-border-color 1px;
  
  td, th 
    border-left: 1px solid @table-border-color;
    border-top: 1px solid @table-border-color;
  
  > :first-child > :first-child > :first-child 
    border-radius: @border-radius-base 0 0 0;
  
  > :first-child > :first-child > :last-child 
    border-radius: 0 @border-radius-base 0 0;
  
  > :first-child > :first-child > :only-child
    border-radius: @border-radius-base @border-radius-base 0 0;
  
  > :last-child > :last-child > :first-child 
    border-radius: 0 0 0 @border-radius-base;
  
  > :last-child > :last-child > :last-child 
    border-radius: 0 0 @border-radius-base 0;
  
  > :last-child > :last-child > :only-child
    border-radius: 0 0 @border-radius-base @border-radius-base;
  

【参考方案9】：

上面关于用面板包裹桌子的答案 (<div class="panel panel-default">) 似乎效果最好。

但是，如 cmets 中所述，您确实需要移除桌子上的顶部边框。

我使用这个 SCSS 来做这件事，所以想我会分享：

// remove extra top border on tables wrapped in a panel
.panel 
  & > .table-responsive > .table.table-bordered, & > .table.table-bordered 
    & > tbody:first-child, & > thead:first-child 
      & > tr:first-child 
        td, th 
          border-top: none;
        
      
    
  

【参考方案10】：

使用 table-bordered-curved 代替 table-bordered

.table-bordered-curved 
    border-radius: 4px;
    border-collapse: separate;
    border: solid 1px #ccc;


.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td 
    border-bottom: solid 1px #ccc;


.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td 
    border-bottom: 0;
    border-right: solid 1px #ccc;


.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child 
    border-right: 0;


.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td 
    border-top: 0;


.table-bordered-curved tbody tr td 
    border-right: solid 1px #ccc;


.table-bordered-curved tbody tr td:last-child 
    border-right: 0;

【参考方案11】：

这是在 Bootstrap 4 中唯一对我有用的解决方案。卡片类只在我的桌子后面放了一个背景。

<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th class="rounded-top" scope="col" colspan="3">Perofrmance</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th scope="col">Strategy</th>
            <th scope="col">YTD</th>
            <th scope="col">Max DD</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">BTCUSD:</th>
            <td>
                <b>15</b>%
            </td>
            <td>
                <b>20</b>%
            </td>
        </tr>
        <tr style="border-bottom: transparent;">
            <th scope="row" style="border-bottom-left-radius: .25rem!important;">ETHUSD:
            </th>
            <td>
                <b>12.6</b>%
            </td>
            <td style="border-bottom-right-radius: .25rem!important;">
                <b id="valueETHDD">0</b>%
            </td>
        </tr>
    </tbody>
</table>