HTML CSS Table with rounded corners-CodePudding

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 >
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody >
    <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>

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/

CodePudding user response：

Like this.

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

<table align=center >
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody >
    <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>

CodePudding user response：

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, 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 >
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody >
    <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>