如何在 <tbody> 元素上添加边框半径？答案

【问题标题】：How to add border-radius on <tbody> element?如何在 <tbody> 元素上添加边框半径？
【发布时间】：2020-09-28 23:51:38
【问题描述】：

我想在<tbody> 元素上添加border-radius 样式。

<table>
  <thead>...</thead>
  <tbody style="border: 1px solid red; border-radius: 12px;">
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

border 正确渲染，遗憾的是没有四舍五入。

【问题讨论】：

标签： html css html-table

【解决方案1】：

您可以尝试使用box-shadow 和border-radius。

tbody {
  box-shadow: 0 0 0 1px red;
  border-radius: 10px;
}

<table>
  <thead>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢，您的选择有效并保持表格结构。
你拯救了我的一天。谢谢！
非常简单的解决方案，谢谢

【解决方案2】：

tbody{
    display:table;
    border: 1px solid red;
    border-radius: 12px;
    }

<table>
  <thead> 
      <th>head...</th>
  </thead>
  <tbody >
    <tr>
      <td>test...</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

这是一个适合我的解决方案：

body {
  background-color: #2b7b2b;
}

table tbody {
  background-color: white;
}

table tbody td {
  display: table-cell
}

table tbody tr:first-child td:first-child {
  border-top-left-radius: 5px;
}

table tbody tr:first-child td:last-child {
  border-top-right-radius: 5px;
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

<div class="body">
  <table>
    <thead>
      <tr>
        <td>column 1</td>
        <td>column 2</td>
        <td>column 2</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案4】：

折叠表格中的边框

border-collapse: collapse;

尝试在 tbody 样式中添加它

display:block

在此处查看类似问题

Is there a clean way to get borders on a in pure CSS?

【讨论】：

边框现在可以了，但是我失去了表格结构，所以问题仍然存在:(

【解决方案5】：

我建议使用单独的样式，例如

<table id="myTable">
  <thead>header</thead>
  <tbody >
    <tr>
      <td>td content</td>
    </tr>
  </tbody>
</table>

<style>
    #myTable{
        border: 1px solid black;
        border-radius: 12px;
    }
</style>

【讨论】：

【解决方案6】：

table{
    width: 100%;
    border-collapse: collapse;
}
table td{
    padding: 5px;
}
table tbody td{
    border: 1px solid  #19dbd0;
  text-align: center;
}

table tbody tr:first-child td {
    border-top: none;
    border-right: none;
  }
  
  table tbody tr:last-child td {
    border-bottom: none;
    border-right: none;
  }
  table tbody tr td:first-child {
    border-left: none;
  }
  table tbody{
    box-shadow: 0 0 0 2px #19dbd0;
    border-radius: 10px;
  }

  <table>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$50</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$50</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$50</td>
          </tr>
        </tbody>
        </table>

【讨论】：