CODEWITHSUNDEEP
htmlcss
Berlin Brown
Berlin Brown

Reputation: 11734

With css and html and within a HTML table, how do you add a column such that it has a shadow?

Imagine I have an HTML table, basic rows, header and columns including use of the table, th, tr, td tags. There are 200+ rows in the table and 10 columns. For the first column and all 200 rows, is it possible to add a shadow that will only show for the right border. And maybe not a box shadow but some kind of shadow effect that only applies to a particular column.

I wanted to do something like this but don't think this the right approach.

border-right: 1px solid  #ccc !important;   
        box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 0.3), -12px 0 8px -4px rgba(0, 0, 0, 0.3);

Upvotes: 1

Views: 64

Answers (2)

isherwood
isherwood

Reputation: 61055

th,
td {
  padding: 0.8em;
  border: 1px solid;
}
th {
  background-color: #eee;
  font-weight: bold;
}
th:first-child, td:first-child {  /* <-- This is your huckleberry */
  box-shadow: 10px 0 5px -2px rgba(0, 0, 0, .3);
  z-index: 999; /* keeps shadow on top for heading elements */
  position: relative; /* required for z-index */
}
<table>
  <tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
  </tr>
  <tr>
    <td>1</td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
  </tr>
  <tr>
    <td>3</td>
    <td>is</td>
    <td>not equals</td>
    <td>a</td>
  </tr>
  <tr>
    <td>4</td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
  </tr>
  <tr>
    <td>5</td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
  </tr>
</table>

Credit: How can I add a box-shadow on one side of an element?

Upvotes: 1

Artanis
Artanis

Reputation: 1005

I belive that using :before and :after pseudo elements for particular column is good way to achieve intended goal. Take a look at this demo and CSS:

http://jsbin.com/manacigi/22/edit?html,css,js,output

Keep in mind that JavaScript used to append shadow class is optional and just used for demonstration purposes - you can achieve this effect by CSS alone.

Upvotes: 0

Related Questions