用css实现的带阴影的表格效果的代码

下面是实现带阴影的表格的步骤：

步骤一：准备HTML代码

首先，我们需要准备一个HTML的表格代码，可以使用以下代码作为示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>21</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

步骤二：使用CSS添加样式

接下来，我们需要使用CSS来实现带阴影效果的表格。具体步骤如下：

1. 给表格添加样式

table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

这段代码的作用是将表格设置为100%宽度，并且将边框合并，使表格看起来更加整洁。同时，使用 box-shadow 属性为表格添加一个阴影效果。

1. 给表头和表格行添加样式

thead {
  background-color: #f9f9f9;
  font-weight: bold;
}

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

tbody tr:hover {
  background-color: #f5f5f5;
}

这段代码的作用是为表头和表格行添加样式。其中，thead 元素定义了表头的样式，background-color 属性用于设置表头的背景色，font-weight 属性用于设置表头的字体加粗效果。table th 和 table td 元素定义了表头和表格行的公共样式，padding 属性用于设置单元格内边距，text-align 属性用于设置单元格文本的水平对齐方式，border-bottom 属性用于为表头和表格行的底部添加一条细线来分隔单元格。tbody tr:hover 选择器定义了当鼠标经过表格行时的样式，background-color 属性用于设置鼠标经过时的背景色。

示例

以下是两条示例说明：

示例一：带阴影效果的表格

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>21</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

thead {
  background-color: #f9f9f9;
  font-weight: bold;
}

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

tbody tr:hover {
  background-color: #f5f5f5;
}

示例二：带阴影效果的交替行底色表格

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd-row">
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr class="even-row">
      <td>李四</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr class="odd-row">
      <td>王五</td>
      <td>21</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

thead {
  background-color: #f9f9f9;
  font-weight: bold;
}

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

tbody tr.odd-row {
  background-color: #f5f5f5;
}

tbody tr.even-row {
  background-color: #fff;
}

tbody tr:hover {
  background-color: #c7d4dd;
}

以上就是使用CSS实现带阴影效果的表格的完整攻略。如有疑问请随时提问。