网站表格手机端响应从多列显示为单列的css怎么写

当需要将网站表格在手机端展现为单列布局，以便于在小屏幕设备上更好地浏览，可以利用CSS媒体查询（Media Queries）和一些基础的CSS属性来调整。以下是一个简单的示例：

/* 默认样式，适用于桌面和大屏幕 */
table {
  width: 100%;
  /* 或者你可以设置固定宽度，比如 1200px */
}

table, th, td {
  /* 如果需要保持单元格之间的间距不变 */
  box-sizing: border-box;
}

/* 开始针对手机端的媒体查询 */
@media (max-width: 768px) { /* 可自定义适配的最小宽度 */
  table thead tr {
    display: none; /* 隐藏表头行 */
  }

  tr {
    /* 将每一行转换为单列，将td元素堆叠在一起 */
    display: block;
    overflow-x: auto;
  }

  td {
    /* 设置每个单元格的宽度为100%，并且让它水平居中 */
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  
  /* 选择器可以根据你的需求定制，例如为特定列添加隐藏或换行等 */
  td:nth-child(2), td:nth-child(3) {
    /* 这里隐藏除第一列外的其他列 */
    display: none;
  }
}

这个例子中，当窗口宽度小于768像素时，表头会被隐藏，并且每行数据会作为一个单独的单元格水平排列。你可以根据实际需要调整媒体查询的条件和列的选择。