css 多行表格合为一行

CSS是现代网页设计中不可或缺的一部分。在制作表格时，我们可以通过CSS将多行表格合为一行，使表格更加美观和优雅。

table {
      border-collapse: collapse;
      width: 100%;
}
td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
}
tr {
      border-bottom: 1px solid #dddddd;
}
tr:nth-child(even) {
      background-color: #dddddd;
}
@media screen and (min-width: 768px) {
  /* 在大屏幕上设置表格 */  table {
        display: table;
  }
  tbody {
        display: table-header-group;
  }
  tr {
        display: table-row;
        border-bottom: none;
  }
  th, td {
        display: table-cell;
        border: none;
  }
}
    

以上代码实现了响应式布局，使得在大屏幕上表格样式更加美观。通过 `display: table` 和 `display: table-cell` 将表格的行和单元格改为类似表格的形式，实现多行合为一行的效果，使得表格更加紧凑和美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！