css 如何在元素上添加边框半径< tbody>?

2skhul33  于 2023-01-14  发布在  其他
关注(0)|答案(6)|浏览(175)

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

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

border渲染正确,不幸的是没有四舍五入。

lstz6jyr

lstz6jyr1#

您可以尝试将box-shadowborder-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>
gg58donl

gg58donl2#

下面是一个适合我的解决方案:

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

ttisahbt3#

tbody{
    display:table;
    border: 1px solid red;
    border-radius: 12px;
    }
<table>
  <thead> 
      <th>head...</th>
  </thead>
  <tbody >
    <tr>
      <td>test...</td>
    </tr>
  </tbody>
</table>
jjjwad0x

jjjwad0x4#

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

gr8qqesn5#

折叠表格中的边框

border-collapse: collapse;

尝试在tbody样式中添加此内容

display:block

在此看到类似的问题
Is there a clean way to get borders on a in pure CSS?

50few1ms

50few1ms6#

我建议使用单独的样式,比如<style>标记或外部样式表,而不是内联样式。

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

相关问题