Bootstrap 4表格移动端适配：无需额外HTML实现卡片式布局

没问题！完全可以做到——不需要额外编写移动端专属的HTML结构，只用CSS（甚至可选加一点JavaScript简化操作）就能把Bootstrap 4的表格在移动端转换成你想要的卡片式布局。下面是具体的实现方案：

核心思路 #

利用CSS媒体查询针对移动端屏幕（Bootstrap 4的sm断点，即小于576px的设备），通过以下几步改造表格：

1. 隐藏表格的表头（thead）
2. 将表格行（tr）设置为块级元素，添加卡片样式（边框、圆角、间距）
3. 将表格单元格（td/th）改为块级元素，通过伪元素显示对应的表头文本
4. 调整单元格内的布局，让表头文本和内容左右排列

方案一：纯CSS实现（需手动添加data-label属性） #

首先给原表格的每个td和th元素添加data-label属性，值为对应表头的文本，这样CSS可以通过伪元素调用这些文本：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="#">1</th>
      <td data-label="First">Mark</td>
      <td data-label="Last">Otto</td>
      <td data-label="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row" data-label="#">2</th>
      <td data-label="First">Jacob</td>
      <td data-label="Last">Thornton</td>
      <td data-label="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row" data-label="#">3</th>
      <td data-label="First">Larry</td>
      <td data-label="Last">the Bird</td>
      <td data-label="Handle">@twitter</td>
    </tr>
  </tbody>
</table>

然后添加以下CSS代码：

/* 针对Bootstrap 4的移动端断点（小于576px） */
@media (max-width: 575.98px) {
  /* 隐藏表头 */
  .table thead {
    display: none;
  }

  /* 将表格行转为卡片样式 */
  .table tbody tr {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    padding: 1rem;
    background-color: #fff;
  }

  /* 将单元格转为块级元素，调整布局 */
  .table tbody td,
  .table tbody th {
    display: block;
    text-align: right;
    padding: 0.5rem 1rem;
    position: relative;
    padding-left: 50%;
  }

  /* 通过伪元素显示表头文本，放在左侧 */
  .table tbody td::before,
  .table tbody th::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    padding-left: 1rem;
    font-weight: 600;
    text-align: left;
    color: #495057;
  }
}

这样在移动端查看时，每一行就会变成独立的卡片，显示类似First: Mark、Last: Otto这样的内容，完全符合你的需求。

方案二：CSS + JavaScript（无需手动修改HTML） #

如果你的表格是动态生成的，或者不想手动添加data-label属性，可以用JavaScript自动给每个单元格添加对应的表头文本：

document.addEventListener('DOMContentLoaded', function() {
  // 目标表格（如果有多个表格，可以修改选择器）
  const targetTable = document.querySelector('.table');
  if (!targetTable) return;

  // 获取所有表头文本
  const headerTexts = Array.from(targetTable.querySelectorAll('thead th'))
    .map(th => th.textContent.trim());

  // 给每个tbody的单元格添加data-label属性
  targetTable.querySelectorAll('tbody tr').forEach(row => {
    Array.from(row.children).forEach((cell, index) => {
      cell.setAttribute('data-label', headerTexts[index]);
    });
  });
});

把这段JS代码放在页面底部或者DOM加载完成的事件中，就可以自动完成data-label的添加，之后再用方案一中的CSS即可实现卡片布局。

效果说明 #

• 在桌面端，表格保持Bootstrap默认的样式，完全不影响原有布局
• 在移动端，表格行变成独立的卡片，每个卡片内清晰展示该行的所有数据，搭配表头文本更易阅读
• 样式完全兼容Bootstrap 4的设计风格，不会出现冲突

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