如何制作响应式登录表单？HTML/CSS新手求助

直接给你适配两种屏幕尺寸的代码，照着改就能实现你要的效果：

HTML 结构 #

<table class="responsive-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="姓名">张三</td>
      <td data-label="年龄">28</td>
      <td data-label="职业">设计师</td>
    </tr>
    <tr>
      <td data-label="姓名">李四</td>
      <td data-label="年龄">32</td>
      <td data-label="职业">开发工程师</td>
    </tr>
  </tbody>
</table>

注意每个<td>要加data-label属性，值对应表头文字，用来在小屏显示对应标题。

CSS 样式 #

/* 默认大屏样式（宽度≥500px） */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 0.8rem;
  text-align: left;
}

.responsive-table th {
  background-color: #f2f2f2;
}

/* 小屏样式（宽度<500px） */
@media (max-width: 499px) {
  /* 隐藏默认表头 */
  .responsive-table thead {
    display: none;
  }

  /* 把表格行变成块级，模拟独立卡片 */
  .responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }

  /* 单元格转为块级，调整排版 */
  .responsive-table td {
    display: block;
    text-align: right;
    padding: 0.8rem;
    position: relative;
    border: none;
    border-bottom: 1px solid #eee;
  }

  /* 用伪元素显示表头文字 */
  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.8rem;
    font-weight: bold;
    text-align: left;
  }
}

原理说明 #

• 大屏下保持常规表格布局，这是默认样式；
• 媒体查询@media (max-width: 499px)会在屏幕宽度小于500px时触发，修改表格的显示方式：隐藏表头，把每行转为块级元素，单元格也转为块级，通过data-label和伪元素把表头文字显示在单元格左侧，实现堆叠式的响应效果，和你预期的小屏样式一致。

内容的提问来源于stack exchange，提问作者lula