HTML CSS Table with rounded corners

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/

tbody cannot be styled, it is not supposed to be seen, it is a semantic wrapper. — G-Cyrillus
– G-Cyrillus, Commented Nov 14, 2022 at 8:59

G-Cyrillus · Accepted Answer · 2022-11-14 19:53:19Z

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>

edited Nov 14, 2022 at 19:53

answered Nov 14, 2022 at 8:56

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kaodeer Over a year ago

overflow:hidden made it work with my code. Didnt even need to use box-shadow. Thank you, I owe you man ^^

Ronnie Smith · Accepted Answer · 2022-11-13 22:47:42Z

2

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>

answered Nov 13, 2022 at 22:47

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

3 Comments

kaodeer Over a year ago

It's not the only table in here, so cant use your css

tatactic Over a year ago

You can use it for some tables or one table. Just adjust the css width .class , #id or table in an element.

kaodeer Over a year ago

You fixed code that was in conflict by deleting it. That's not fix at all.

Collectives™ on Stack Overflow

HTML CSS Table with rounded corners

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related