Question

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

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

border正确呈现，遗憾的是没有舍入。

Answer 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>

Answer 2

Constructor

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

Answer 3

折叠表格中的边框

border-collapse: collapse;

尝试在tbody样式中添加它

display:block

在这里看到类似的问题

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

Answer 4

我建议使用单独的样式，例如＆lt;风格＆gt;标记或外部样式表，而不是样式内联。

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

Answer 5

以下是对我有用的解决方案：

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>

Answer 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>

如何在元素上添加border-radius？

6 个答案: