CODEWITHSUNDEEP
htmlcsshtml-table
user3262259
user3262259

Reputation: 37

Adding CSS drop shadow to all sides of table

This is advice for a beginner, please do not tell me why I shouldn't use tables.

How do I add a drop shadow to all edges of my table using CSS? also where should I put it? and how do I link it to the table?

<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Upvotes: 2

Views: 8086

Answers (1)

Sverri M. Olsen
Sverri M. Olsen

Reputation: 13263

You can use the CSS box-shadow property.

box-shadow: 8px 5px 5px 0px #aaa;

If you are not comfortable with CSS yet then there are a few websites that do it for you. This one came up as the first result in Google.

So, everything together would look something like this:

<style>
  table {
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
</style>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Upvotes: 4

Related Questions