Question

我找到了一个名为box-shadow的属性但是可能很难将它与我的表格结合起来。

是否有可以添加到表格样式的属性？
像first-column-border-style属性？

这是我想要实现的一个例子：

Answer 1

没有列的直接属性，但您可以做的是......

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

在上表中，您可以使用以下css -

访问第一列

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

上面的css选择器会给你每个第一个孩子显然是你的第一列。

Answer 2

使用:first-child与td和th然后设置shadow

在css中了解孩子：https://www.w3schools.com/cssref/sel_firstchild.asp
了解css中的 box-shadow ：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>

Answer 3

您可以将类添加到表格行的第一行并为其添加CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您必须在CSS中使用以下选择器：

:first-of-type定位您的第一个td，
:nth-of-type(x)其中x是您想要的td的索引。

然后，您可以轻松地设置任何样式。

请注意，在您的输出示例图像中，似乎第二列的开头有一个插入box-shadow，而不是第一列。

这是一个工作片段，我使用上述两种方法添加了box-shadow：

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助。

Answer 5

在桌面上使用框阴影应该没有任何困难 - ＆gt; W3schools。正如我理解你的问题，你只想对某个列或行应用阴影。要实现这一点，只需通过id或类以及相应的CSS来设置相应元素的样式。这是一个例子：

    .shadow {
        box-shadow: 1px 2px #888888;
    }

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>shadow test</title>
    </head>
    <body>
        <table style="width:50%">
            <tr>
            <th class="shadow">Firstname</th>
            <th>Lastname</th> 
            <th>Age</th>
            </tr>
            <tr>
            <td>Jill</td>
            <td>Smith</td> 
            <td>50</td>
            </tr>
            <tr>
            <td>Eve</td>
            <td>Jackson</td> 
            <td>94</td>
            </tr>
        </table>
    </body>
    </html>

我希望有所帮助 - 如果您有其他意思请澄清......

如何在css中创建单个阴影列边框？

5 个答案: