html - 使用 css 和 html 以及在 HTML 表格中，如何添加一列使其具有阴影？

Question

假设我有一个 HTML 表格、基本行、标题和列，包括使用表格、th、tr、td 标签。表中有 200 多行和 10 列。对于第一列和所有 200 行，是否可以添加仅显示右边框的阴影。也许不是框阴影，而是某种仅适用于特定列的阴影效果。

我想做这样的事情，但我认为这不是正确的方法。

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);

Answer 1

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>

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