如何使用Bootstrap 4和CSS实现适配智能手机视图的响应式表格

第一步：修改HTML代码 #

给每个<td>添加data-label属性，属性值为对应表头的文本，修改后完整代码如下：

<table class="table table-bordered">
  <thead>
    <tr class="table-dark">
      <th></th>
      <th>Title</th>
      <th>Name2</th>
      <th>Name3</th>
      <th>Name4</th>
      <th>Name5</th>  
      <th>Name6</th>
      <th>Rating</th>
      <th>Button</th>  
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td data-label="">
          <img id="brandimg" alt="" src="">
      </td>
      <td data-label="Title"><a href=""></a></td>
      <td data-label="Name2"></td>
      <td data-label="Name3"></td>
      <td data-label="Name4"></td>
      <td data-label="Name5"></td>
      <td data-label="Name6"></td>
      <td data-label="Rating">
          <span class="fa fa-star"></span>
          <span class="fa fa-star"></span>
          <span class="fa fa-star"></span>
          <span class="fa fa-star"></span>
          <span class="fa fa-star"></span>
      </td>
      <td data-label="Button">
          <button type="submit" class="btn btn-info">Add</button> 
      </td>
    </tr>
  </tbody>
</table>

第二步：添加自定义CSS样式 #

通过媒体查询针对移动端（Bootstrap 4的sm断点以下，即屏幕宽度小于576px）重写表格样式，实现卡片式布局：

/* 适配小于576px的移动设备 */
@media (max-width: 575.98px) {
  /* 隐藏桌面端表头 */
  .table thead {
    display: none;
  }
  /* 每行表格转为块级元素，模拟卡片效果 */
  .table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
  }
  /* 每个单元格转为块级，右对齐内容 */
  .table td {
    display: block;
    text-align: right;
    padding: 0.75rem 0.75rem 0.75rem 40%;
    border-top: 1px solid #dee2e6;
    position: relative;
  }
  /* 通过伪元素插入表头标签，左对齐显示 */
  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    font-weight: 700;
    text-align: left;
    width: calc(40% - 1.5rem);
  }
  /* 调整图片单元格样式，避免错位 */
  .table td:first-child {
    text-align: center;
  }
  .table td:first-child::before {
    display: none;
  }
}

效果说明 #

• 桌面端保持原有表格布局，和你当前的效果完全一致
• 移动端自动转为每条数据单独成卡片的布局，字段名显示在左侧，内容显示在右侧，和你预期的适配效果一致
• 完全兼容Bootstrap 4的原有样式体系，不需要额外引入其他依赖

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