Reputation: 977

CSS Rounded corners for table header with background-color

I'm trying to create a table with rounded top corners and a different background color for the header line. I succeeded in making both individually (super beginner in html/css) thanks to online ressources but I fail when it comes to have the two at the same time.

What I mean is (and you can see it in the fiddle below), I can round the corners just fine and have the design I want for my table except that the header background-color is still a perfect rectangle and thus is overflowing outside the rounded corners.

I tried adding the border-radius property in various places but none worked the way I intended. How can I make the corners rounded and having the thead background-color fitting nicely in it ?

table.std {
  margin-top: 0.2cm;
  width: 100%;
  border: 0.03cm solid #8a8a8a;
  border-spacing: 0;
  border-radius: 15px 15px 0px 0px;
  font-size: 10pt;
}

table.std thead {
  text-align: left;
  background-color: lightgray;
  height: 25px;
}

table.std thead tr th:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  border-bottom: 0.03cm solid #8a8a8a;
}

table.std tbody tr td:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  width: 30%;
}

table.std tbody tr td {
  border-bottom: 0.01cm dashed lightgray;
  height: 20px;
}

<div>
  <table class="std">
    <thead>
      <tr>
        <th colspan=2>Test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ID</td>
        <td>id1</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>2019/12/19</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
      </tr>
      <tr>
        <td>lorem</td>
        <td>ipsum</td>
      </tr>
      <tr>
        <td>john</td>
        <td>doe</td>
      </tr>
    </tbody>
  </table>
</div>

https://jsfiddle.net/co7xb42n/

Thanks for the help

Upvotes: 6

Answers (4)

Alex from Jitbit

Reputation: 60792

A little late to the party but there's a very simple fix.

Just add overflow: hidden; to the table, it will clip its inner content and background color won't "bleed" outside the rounded borders.

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

https://developer.mozilla.org/en-US/docs/CSS/overflow

If for whatever reasons you can't add overflow then use other answers

Upvotes: 1

Nethra

Reputation: 609

add border-radius from th tag.

table.std {
    margin-top: 0.2cm;
    width: 100%;
    border: 0.03cm solid #8a8a8a;
    border-spacing: 0;
    border-radius: 15px 15px 0px 0px;
    font-size: 10pt;
}

table.std thead {
    text-align: left;
    background-color: lightgray;
    height: 25px;
}

table.std thead tr th:first-child {
    padding-left: 0.25cm; /* To align with section title */
    border-bottom: 0.03cm solid #8a8a8a;
    border-radius: 15px 15px 0px 0px;
}

table.std tbody tr td:first-child {
    padding-left: 0.25cm; /* To align with section title */
    width: 30%;
}

table.std tbody tr td {
    border-bottom: 0.01cm dashed lightgray;
    height: 20px;
}

<div>
                <table class="std">
                    <thead>
                        <tr>
                            <th colspan=2>Test</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ID</td>
                            <td>id1</td>
                        </tr>
                        <tr>
                            <td>Date</td>
                            <td>2019/12/19</td>
                        </tr>
                        <tr>
                            <td>foo</td>
                            <td>bar</td>
                        </tr>
                        <tr>
                            <td>lorem</td>
                            <td>ipsum</td>
                        </tr>
                        <tr>
                            <td>john</td>
                            <td>doe</td>
                        </tr>
                    </tbody>
                </table>
</div>

Upvotes: 6

user10196907

Reputation:

This is cause the th tag is above of the table tag and it doesn't have any border-radius

Add the border-radius to th

Upvotes: 0

user3401335

Reputation: 2405

Add the border-radius to th

table.std thead tr th:first-child {
    padding-left: 0.25cm; /* To align with section title */
    border-bottom: 0.03cm solid #8a8a8a;
    border-radius: 15px 15px 0px 0px;
}

https://jsfiddle.net/53eshg64/

Upvotes: 4

CSS Rounded corners for table header with background-color

Answers (4)

Related Questions