How to make a custom looking table with HTML and CSS?

Question

I was wondering how could I create a custom looking Table like that?

body {
  background-color: white;
}

table {
  border: 1px solid black;
  border-radius: 15px;
  background: lightgrey;
  color: black;
  padding-left: 15px;
  padding-right: 15px;
}

.t_head {
  background-color: dodgerblue;
}

td {
  padding-left: 10px;
  padding-right: 10px;
}

#t_body {
  background-color: grey;
}

<div id="test_div">
  <table>
    <thead>
      <tr>
        <div class="t_head">
          <th>Test Header</th>
          <th>Test Header</th>
          <th>Test Header</th>
        </div>
      </tr>
    </thead>
    <tbody>
      <div id="t_body">
        <tr>
          <th>Test data</th>
          <th>Test data</th>
          <th>Test data</th>
        </tr>
        <tr>
          <th>Test data</th>
          <th>Test data</th>
          <th>Test data</th>
        </tr>
      </div>
    </tbody>
  </table>
</div>

I tried to add some styling for thead/tr element but the results are pretty much the same. Also, the borders in thead is something I can't add. I am very new to html and css and my searching attempts weren't very successful. I would appreciate any help!

Answer 1

You could do this with divs and flex, it's easier

https://codepen.io/anon/pen/YJyBmy

.d-flex {
  display: flex;
}

#table {
  border: 4px solid black;
  border-radius: 20px;
  width: 500px;
}

#thead>div,
#tbody>div {
  border-left: 4px solid black;
  padding: 15px;
  width: 33%;
}

#thead>div:first-child,
#tbody>div:first-child {
  border: 0;
}

#thead {
  background: dodgerblue;
  border-radius: 15px 15px 0 0;
  border-bottom: 4px solid black;
}

#tbody {
  background: grey;
  border-radius: 0 0 15px 15px;
}

<div id="table">
  <div id="thead" class="d-flex">
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="tbody" class="d-flex">
    <div>test</div>
  </div>
</div>

Answer 2

Firstly, fix your html - remove the divs from the table as they are invalid, then you can put the blue colour on the cells in the header and the grey on the cells in the body.

I have put a whole border on the table and hidden the overflow for the rounded edges, then on the header I have just added a bottom and left border to fill in the lines - removing the left from the first cell (as that is on the outline of the whole table).

The border-spacing just removes any space between the cells so the borders are next to each other (like using border-collapse)

body {
  background-color: white;
}

table {
  overflow: hidden;
  color: black;
  border: 1px solid #000000;
  border-radius: 15px;
  border-spacing: 0;
}

thead th {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  padding: 5px 10px;
  background-color: dodgerblue;
  border-collapse: collapse;
}

thead th:first-child {
  border-left: none;
}

td {
  padding: 5px 10px;
  background: lightgrey;
}

<div id="test_div">
  <table>
    <thead>
      <tr>
        <th>Test Header</th>
        <th>Test Header</th>
        <th>Test Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test data</td>
        <td>Test data</td>
        <td>Test data</td>
      </tr>
      <tr>
        <td>Test data</td>
        <td>Test data</td>
        <td>Test data</td>
      </tr>
    </tbody>
  </table>
</div>