How can I create a single shadow column border in css?

Question

I found a property which is called box-shadow.
However it might be difficult to combine it with my table.

Is there a property I can add to the table style?
Something like first-column-border-style property?

Here is an example of what I want to achieve:

Possible duplicate of [Add box-shadow to table column (top to bottom)?](https://stackoverflow.com/questions/24493187/add-box-shadow-to-table-column-top-to-bottom) — Marc Hjorth, May 30 '18 at 07:33
it's not why you score -1 the question is border from one side not for all side check — Anubhav pun, May 30 '18 at 07:49
You've been downvoted because you didn't post any code, and your question is too broad. You should post at least the current HTLM/CSS code of your table, and maybe an attempt of what you're trying to achieve. — Takit Isy, May 30 '18 at 09:37

score 0 · Answer 1 · answered May 30 '18 at 07:38

there isn't a direct attribute for column but what you can do is...

<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

In above table you can access first column using following css-

tr>:first-child {
    <your_box-shadow_code_goes_here>
    .
    .
    .
}

above css selector will give you every first child of which is apparently your first column.

לבני מלכה · Accepted Answer · 2018-05-30T07:50:21.797

Use :first-child to td and th then set shadow

Learn about child in css:https://www.w3schools.com/cssref/sel_firstchild.asp
Learn about box-shadow in css:https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
td:first-child,th:first-child{
 box-shadow: -15px 0 15px -15px inset;
}

<h2>HTML Table</h2>

<table>
  <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>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

https://meta.stackexchange.com/questions/147531/how-mark-my-question-as-answered-on-stackoverflow — לבני מלכה, May 30 '18 at 10:45

score 0 · Answer 3 · answered May 30 '18 at 07:43

You can add class to the first of your table row and the add CSS for it.

.shadow-column{
  box-shadow: 10px 0px 10px rgb(140, 140, 140, 0.5);
}
table,tr, td{
border: 1px solid #000;
border-collapse:collapse;
}

<table>
  <tr>
    <td class="shadow-column">foo</td>
    <td>bar</td>
    <td>damns</td>
  </tr>
    <tr>
    <td class="shadow-column">foo</td>
    <td>bar</td>
    <td>damns</td>
  </tr>
    <tr>
    <td class="shadow-column">foo</td>
    <td>bar</td>
    <td>damns</td>
  </tr>
    <tr>
    <td class="shadow-column">foo</td>
    <td>bar</td>
    <td>damns</td>
  </tr>
</table>

Takit Isy · Answer 4 · 2018-05-30T09:51:01.740

You must want to use the following selectors in your CSS:

:first-of-type to target your first td,
:nth-of-type(x) where x is the index of the td you want.

Then, you can style anything easily.

Note that in your example-of-output image, it seems that there is an inset box-shadow on the beginning of the 2nd column, not the first one.

Here is a working snippet where I added a box-shadow using both of the above methods:

table {
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid lightgray;
  text-align: left;
  padding: 8px 16px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* Styling 1st column */
td:first-of-type {
  box-shadow: -25px 0 25px -25px inset blue;
}

/* Styling 2nd column */
td:nth-of-type(2) {
  box-shadow: 25px 0 25px -25px inset red;
}

<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Hope it helps.

How can I create a single shadow column border in css?

4 Answers4