Bootstrap 3 响应式表格适配：问卷移动端TD换行布局实现

针对你说的需求，其实不需要改动现有HTML结构，只需要加一点自定义CSS就能轻松搞定。核心思路是利用媒体查询，在移动端把表格的行和单元格改成块级元素，同时把表头的标签通过伪元素加到每个单元格前面，让用户能清晰对应选项关系。

具体操作步骤： #

1. 给表格外层保留Bootstrap的.table-responsive类（桌面端保持原有布局，移动端配合我们的CSS实现垂直排列），同时给表格本身加一个自定义类（比如.questionnaire-table），方便我们精准控制样式。

2. 添加以下自定义CSS，专门针对Bootstrap 3的移动端断点（屏幕宽度小于768px时生效）：

@media (max-width: 767px) {
  /* 隐藏桌面端表头，移动端用伪元素展示标签 */
  .questionnaire-table thead {
    display: none;
  }

  /* 把每个问题行变成独立块，加边框和间距区分不同问题 */
  .questionnaire-table tbody tr {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
  }

  /* 让每个单元格占满一行 */
  .questionnaire-table tbody td {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* 给每个单元格添加对应表头标签，按列顺序匹配 */
  .questionnaire-table tbody td:nth-child(1):before {
    content: "问题：";
    font-weight: bold;
    margin-right: 0.3rem;
  }

  .questionnaire-table tbody td:nth-child(2):before {
    content: "非常同意：";
    font-weight: bold;
    margin-right: 0.3rem;
  }

  .questionnaire-table tbody td:nth-child(3):before {
    content: "同意：";
    font-weight: bold;
    margin-right: 0.3rem;
  }

  .questionnaire-table tbody td:nth-child(4):before {
    content: "中立：";
    font-weight: bold;
    margin-right: 0.3rem;
  }

  .questionnaire-table tbody td:nth-child(5):before {
    content: "不同意：";
    font-weight: bold;
    margin-right: 0.3rem;
  }

  .questionnaire-table tbody td:nth-child(6):before {
    content: "非常不同意：";
    font-weight: bold;
    margin-right: 0.3rem;
  }
}

这个方案的优势： #

• 零HTML改动：完全基于你现有表格结构，只加一个自定义类和一段CSS，成本极低
• 响应式兼容：桌面端保持原有横向布局，移动端自动切换为垂直排列，符合用户习惯
• 清晰易懂：通过伪元素把表头标签带到每个选项前，用户在小屏幕上不会混淆选项含义
• 灵活调整：如果你的表头选项或列数不同，只需要修改nth-child对应的content内容即可

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