'How to add padding to table head (thead)

What I'm trying to do

I'm trying to implement a table header with a border and drop shadow, and have it include padding on the table head.

What I've tried

I gave the div that wraps the table a padding of .75em and when I added a drop-shadow and border to the thead, it did not go around the padding (expected). It did produce the effect I was going for, just there is still padding around the thead that I would like to be included with this effect.

Next I tried moving the .75em padding to the thead and tbody, but it is not working as intended. Inspecting says padding has no effect on internal table elements except cells.

Next I tried to wrap the content inside the thead in a div and give that a padding of .75em, but that did not work.

Next I tried to wrap the content outside the thead in a div and give that a padding of .75em, but that did not work either.

My DOM looks like this

<div class='spreadsheet'>
  <table class='data'>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

What I'm trying to achieve: What I'm trying to do

htmlcss


Solution 1:[1]

Not sure to understand what you want, but is it working for you?

.spreadsheet{
  background:lightblue;
  padding:0.75em;
}

table {
  border-radius: 5px;
  box-shadow: 2px 2px 5px lightgray;
  border-spacing: 0;
  background:white;
}

th {
  padding: 20px;
}

thead {
  border-radius: 5px;
  box-shadow: 2px 2px 5px lightgray;
}

tbody {
  margin-top: 50px;
  padding-top: 20px;
}

Result i have

Solution 2:[2]

As a temporary solution I've added blank rows and columns to each side and gave them a height and width respectively of the padding size. This causes problems with hovering and makes things more complicated than they probably need to be.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fred
Solution 2 Andrew

Related Questions