58

Bootstrap 3 在桌子上掉了圆角。请问当我申请.table-bordered课程时，我应该申请哪些样式才能让它们恢复原状？

更新

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

取自 Bootstrap 2.3.2 的 CSS：

.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>
4

11 回答 11

153

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

像这样：

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>
于 2014-01-03T12:16:38.907 回答
28

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

在 normalize.less 中有包含边框折叠：折叠的表重置。这不在 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;
    }
}
于 2013-09-17T21:10:57.740 回答
10

使用克里斯蒂娜的回答和这个线程，我想出了这个 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;
}
于 2013-10-09T12:49:57.940 回答
4

我假设您没有使用源文件。然而，在 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;
}

我认为它可能会奏效。

于 2013-10-18T08:06:35.927 回答
2

以下一个对我来说非常有效：

.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;
}

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

于 2015-10-05T16:27:52.123 回答
1

为了引导起见：

.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;
    }
}
于 2014-02-13T06:00:36.667 回答
1

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

.table {
  border-radius: 5px;
}
th:first-of-type {
  border-top-left-radius: 5px;
}
th:last-of-type {
  border-top-right-radius: 5px;
}
于 2016-08-30T10:05:26.610 回答
0

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

（添加了对代码的修复：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;
  }
}
于 2014-03-20T18:50:24.420 回答
0

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

但是，正如评论中提到的，您确实需要删除表格的顶部边框。

我使用这个 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;
        }
      }
    }
  }
}
于 2015-06-18T05:59:51.097 回答
0

使用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;
}
于 2017-12-12T10:37:05.373 回答
0

这是在 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>
于 2021-10-07T14:16:24.820 回答