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!

Pete · Accepted Answer · 2018-10-02 16:02:46Z

5

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>

answered Oct 2, 2018 at 16:02

Pete

58.8k31 gold badges132 silver badges188 bronze badges

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

1 Comment

Ademir Gotov Over a year ago

That's perfect! Thank you very much!

Mark Schultheiss · Accepted Answer · 2018-10-02 17:06:16Z

2

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>

edited Oct 2, 2018 at 17:06

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

answered Oct 2, 2018 at 16:11

Michel-Ange

392 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related