CODEWITHSUNDEEP
htmlcss
Nidhin Joseph
Nidhin Joseph

Reputation: 10227

How to add a bottom box shadow for table header

I am trying to add a bottom box shadow for the table headers, but for some reason, the shadow appears on the sides as well. The below is the code that I am trying with.

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  padding: 8px;
}

#customers th {
  box-shadow: 0 1px 2px 0px grey;
}
<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

What I am looking for is a box shadow with blur:2px, spread:0px, y-offset:1px and x-offset:0px

Upvotes: 2

Views: 1960

Answers (3)

Temani Afif
Temani Afif

Reputation: 272723

You can add clip-path to clip the non needed shadow:

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  padding: 8px;
}

#customers th {
  box-shadow: 0 1px 4px 0px grey;
  clip-path:inset(0 0 -10px 0); /* 10px or any bigger value than the blur */
}
<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Upvotes: 0

Nabeel Khan
Nabeel Khan

Reputation: 3993

You need to add negative value to the left box-shadow, so that it moves the shadow to the left side, making it all hidden behind the original element.

Edit: give shadow to the tr instead to remove the space in between shadows issue.

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  padding: 8px;
}

.headingtr {
  box-shadow: 0 2px 2px -2px grey;
}
<table id="customers">
  <tr class="headingtr">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Upvotes: 0

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

Guess this might be what you're looking for I make some edit on the box-shadow and I centered the table data td and table head th in order to make its appearance look nice

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  padding: 8px;
  /* added */
  text-align: center;
}

#customers th {
  /* edited */
  box-shadow: 0px 2px 0px rgba(128,128,128, .15);
}
<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Upvotes: 2

Related Questions