如何在 Bootstrap 中为 <thead> 添加半径答案

【问题标题】：How to add radius to <thead> in Bootstrap如何在 Bootstrap 中为 <thead> 添加半径
【发布时间】：2016-06-22 19:39:39
【问题描述】：

我试图在 Bootstrap 中添加一些半径来标记。但是我尝试了所有方法，我无法添加。如果您想了解更多详细信息，请告诉我您想学习什么。顺便说一句，我尝试将半径添加到 <thead> 内的 <tr> 标签，但也没有用。这是我的代码：

HTML

<table class="table">
  <thead>
    <tr>
      <th>Sıra</th>
      <th>İsim</th>
      <th>Altın</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><img src="https://minotar.net/helm/CmJustice/20"> CmJustice</td>
      <td>124123123</td>
    </tr>
  </tbody>
</table>

CSS

thead {
  background-color: #E0E0E0;
  border: 3px;
  border-color: #E0E0E0;
  border-radius: 100px;
}

【问题讨论】：

为什么我觉得这个问题只是在这里问stackoverflow.com/questions/37963524/…
您需要将border-radius 添加到th 而不是thead
但我希望标签是圆角的。不是每一个
你必须通过前面的第一个和最后一个来完成。

【解决方案1】：

您不能将border-radius 直接应用于thead。您可以将其应用于第一个和最后一个 th 以产生相同的效果。

thead th {
  background-color: #E0E0E0;
}
thead th:first-child {
  border-radius: 100px 0 0 100px;
}
thead th:last-child {
  border-radius: 0 100px 100px 0;
}

/* remove border from th... */
/* !important is only required in stack snippet, probably not in your production code */

.table > thead > tr > th {
  border: none !important;
}

/* remove border from first tbody row... */
.table > tbody > tr:first-child > td,
.table > tbody > tr:first-child > th {
  border-top: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th>Sıra</th>
      <th>İsim</th>
      <th>Altın</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢，我想这是最好的办法：）
但是你可以看到块的底部有一条小线。你有什么想法删除它吗？
@AlperBerber 那么你必须为第一个孩子使用border-top:0。
头th:first-child {border-top:0;边框半径：100px 0 0 100px； } thead th:last-child {border-bottom: 0;边框半径：0 100px 100px 0； } 看起来还是一样？
```
thead
```
顶部的小线消失了，但底部的另一条仍然存在
抱歉给我弄得一团糟。我不知道如何在 cmets 中添加代码。

【解决方案2】：

您甚至可以通过将类添加到您的 tr 来尝试像这样添加，如下所示。实际上可以添加thead的背景颜色，但使用旧方法bgcolor，这在使用css3时不起作用。

<thead>
<tr class="brd">
  <th>Sıra</th>
  <th>İsim</th>
  <th>Altın</th>
</tr>
</thead>

.brd{
background-color:#ccc;
}
.brd > th:nth-child(1){
background:#ccc;
border-radius:30px 0px 0px 30px;
}
.brd > th:nth-child(3){
background:#ccc;
border-radius:0px 30px 30px 0px;
}
tbody{
border-top:3px solid #fff;
}

使用 tbody 我将灰色边框更改为白色。

【讨论】：

欢迎@AlperBerber

【解决方案3】：

以@Turnip 的回答为基础，您可以做类似的事情..

查看 CSS 部分中的“表格边框修复”

DEMO

thead th {
  background-color: #E0E0E0;
}
thead th:first-child {
  border-radius: 100px 0 0 100px;
}
thead th:last-child {
  border-radius: 0 100px 100px 0;
}
/** Border Fix. **/
table th {
  border: none !important;
}
table td {
  border: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th>Sıra</th>
      <th>İsim</th>
      <th>Altın</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>
        <img src="https://minotar.net/helm/CmJustice/20">CmJustice</td>
      <td>124123123</td>
    </tr>
  </tbody>
</table>

【讨论】：