HTML CSS 圆角表

Question

I have little problem with my table. It is stylized by classes. One for TABLE that makes rounded corners and changes background to grey. The other is to make rest of the table white and I assign it to TBODY. After second class is asigned, bottom-left and bottom-right corners are no longer rounded.

<table align=center class="grey">
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody class="white">
    <tr height=50>
      <td>row two</td>
      <td>row two</td>
    </tr>

    <tr height=50 class="white">
      <td>row three</td>
      <td>row three</td>
    </tr>
  </tbody>
</table>

body {
  background: #000;
}

table.grey {
    background: #F6F2F5;
    border: 3px solid #FFF;
    text-align: center;
    width: 80%;
    padding: 15px;
    border-collapse: collapse;
    border-left: 0;
    border-right: 0;
    border-radius: 10px;
    border-spacing: 0px;
}
.white {
  background: #FFF;
  color: #000;
  padding: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Giving class to TR of each row gives same result as to TBODY. I'm dumb.https://jsfiddle.net/2tm4z90b/8/

Answer 1

Like this.

 table { border-radius: 5px; border: 1px solid black; } table thead { background: gray; }

 <table align=center class="grey"> <thead> <tr height=50> <th>header</th> <th>header</th> </tr> </thead> <tbody class="white"> <tr height=50> <td>row two</td> <td>row two</td> </tr> <tr height=50 class="white"> <td>row three</td> <td>row three</td> </tr> </tbody> </table>

Answer 2

tbody cannot really be styled, it is part of the structure of a table and is not supposed to be seen, nor styled unless you reset its display but that will break your table-layout.

Option are

• to set the radius only on the table and use overflow.
• fake the border via a box-shadow if needed, so it follows the rounded shape

Possible example:

 body { background: #000; } table.grey{ margin-top:3em; background: gray; box-shadow:0 0 0 3px red;/* instead border */ text-align: center; width: 80%; padding: 15px; border-collapse: collapse; border-left: 0; border-right: 0; border-radius: 10px; border-spacing: 0px; overflow:hidden; /* hide overflowing cells */ }.white tr { background: #bee; color: #000; padding: 50px; }

 <table align=center class="grey"> <thead> <tr height=50> <th>header</th> <th>header</th> </tr> </thead> <tbody class="white"> <tr height=50> <td>row two</td> <td>row two</td> </tr> <tr height=50> <td>row three</td> <td>row three</td> </tr> </tbody> </table>