css如何给表格设置下拉

CSS提供了多种方法来美化表格，其中一种方法是设置下拉。使用CSS设置下拉可以使表格看起来更加整洁和美观。下面是一个样例表格：

<table>
  <tr>
    <th>名称</th>
    <th>价格</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>2元/个</td>
    <td>新鲜的红苹果</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>1.5元/个</td>
    <td>黄皮香蕉</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>3元/个</td>
    <td>汁水丰富的橙子</td>
  </tr>
</table>

接下来，我们使用CSS来设置下拉。首先，我们需要为表格添加一个类名，这里我们使用“table-dropdown”：

<table class="table-dropdown">
  ...
</table>

然后，在CSS中，我们为该类名添加下拉样式：

.table-dropdown {
  border-collapse: collapse;
}

.table-dropdown th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}

.table-dropdown td,.table-dropdown th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.table-dropdown td {
  display: none;
}

.table-dropdown tr:hover td {
  display: block;
}

以上样式中，我们通过设置单元格的display属性为none来隐藏单元格的内容，当鼠标悬停在表格行上时，通过设置:hover伪类和display属性为block，来显示下拉的单元格内容。

最终效果如下：

名称	价格	描述
苹果	2元/个	新鲜的红苹果
香蕉	1.5元/个	黄皮香蕉
橙子	3元/个	汁水丰富的橙子