css如何收起表格中的行

CSS是前端开发中非常重要的一部分，它可以帮助我们实现页面的美观和优雅，其中，表格是我们常用的页面元素之一。有时候我们会遇到需要折叠表格行的需求，接下来让我们来看看CSS如何实现表格行的收起。

table {
  border-collapse: collapse;
}

tbody tr {
  display: block;
  margin-bottom: 10px;
}

tbody tr td {
  border: 1px solid #ccc;
}

tbody tr td:first-child {
  font-weight: bold;
}

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

tbody tr:not(:first-child) td {
  display: none;
}

这段CSS代码实现了让表格行收起的功能。我们可以分析一下，它的具体实现方式是：

1. 设置表格的边框为无边框，可以实现表格的整体紧凑；
2. 设置tbody中每一行tr的display属性为block，并设置margin-bottom，使得每一行之间有一定的间距；
3. 为表格中的每一个单元格td设置边框，并为每行的第一个单元格设置加粗的字体；
4. 设置tbody中每一行tr的hover事件，当鼠标悬浮在某行上时，背景颜色变为#f5f5f5；
5. 为了实现行收起的效果，设置tbody中除了第一行之外的所有行的display属性为none，可以将这些行隐藏起来。

当我们点击某行时，由于该行的上方为被隐藏起来的行组成，因此可以实现收起该行的效果。

至此，我们就实现了CSS收起表格行的功能，通过在实际开发过程中灵活应用CSS，我们可以为用户带来更好的使用体验。