Giving a table column a shadow

HTML & CSS
1

Hi there,

I am trying to give a column in a Bootstrap table a shadow, but not sure how to do this.

As it’s a shadow, i’m guessing I will need to wrap the column in a div, but not sure how to do this as they are not all in one place.

This is a pen of what I have:

Can anyone suggest the best way to do this?

Thanks!

2

Hi there toolman,

here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }

 table {
    border-collapse: collapse;
 }

td {
    padding:1em;
    background-color: #fff;
    box-shadow: 0.25em 0.25em  0.25em  rgba( 0, 0, 0, 0.4 );
 }
</style>

</head>
<body>

<table>
 <tbody>
  <tr>
   <td>test</td>
  </tr>
  <tr>
   <td>test</td>
  </tr>
  <tr>
   <td>test</td>
  </tr>
</tbody>
</table>

</body>
</html>

coothead

1 Like
3

Hi,

Thanks for the reply.

I am trying to give just one column a shadow, for example like this:

image
image1543×388 6.69 KB

I guess I will need to apply left and right shadow to the tds and then a top to the top cell and a bottom border to the bottom border.

Is there a way to wrap a whole column? I’m guess that will probably break the code.

4

Would something like this do?

Not perfect but close.

edit:
Doesn’t seem to work in Edge so go with the @coothead example instead :slight_smile:

edit edit:
It works in Edge and IE11 if the separate borders model is used. Pen updated :slight_smile:

3 Likes
5

Hi there toolman,

I would suggest that you use border instead of box-shadow.

Here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }

 table {
    border-collapse: collapse;
 }
 
th, td {
    padding: 0.5em;
 }
 
th:nth-of-type( 6 ) {
    border: 0.25em solid rgba( 0, 0, 0, 0.2 );
    border-bottom: 0;
    background-color: #fff;

 }
 
td:nth-of-type( 5n+5 ) {
    border-left: 0.25em solid rgba( 0, 0, 0, 0.2 );
    border-right: 0.25em solid rgba( 0, 0, 0, 0.2 );
    background-color: #fff;
 }
 
tr:last-of-type td:last-of-type {
    border-bottom: 0.25em solid rgba( 0, 0, 0, 0.2 );
 }
</style>

</head>
<body>

<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
      <th scope="col">Header 4</th>
      <th scope="col">Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">content</th>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <th scope="row">content</th>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
     <tr>
      <th scope="row">content</th>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
     <tr>
      <th scope="row">content</th>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

</body>
</html>

coothead

4 Likes
6

Thank you :slight_smile: I will have a play

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.