小屏幕下将<tr>内的<td>拆分为两行的响应式布局实现求助

嘿，我明白你想要实现桌面和移动端的差异化布局，尤其是小屏幕下把表格行里的单元格拆成两行显示的需求。结合你已经在用Bootstrap栅格系统的情况，我给你两个实用的解决方案：

如果你想保留原生的<table>结构，只需要通过媒体查询针对小屏幕调整单元格的显示方式即可，甚至可以给每个单元格加上表头提示，提升移动端的可读性：

首先，给你的表格单元格加上data-label属性，对应表头的内容：

<table class="table">
  <thead>
    <tr>
      <th>用户名称</th>
      <th>联系方式</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="用户名称">Jack</td>
      <td data-label="联系方式">jack@example.com</td>
    </tr>
    <tr>
      <td data-label="用户名称">John</td>
      <td data-label="联系方式">john@example.com</td>
    </tr>
  </tbody>
</table>

然后添加以下CSS（针对Bootstrap的sm断点以下设备，也就是宽度小于576px的屏幕）：

@media (max-width: 575.98px) {
  /* 让每个单元格独占一行 */
  .table tbody tr td {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding-left: 50%;
    position: relative;
    box-sizing: border-box;
  }

  /* 利用data-label属性显示表头提示 */
  .table tbody tr td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 15px;
    font-weight: 700;
    text-align: left;
  }
}

这样在小屏幕下，每个<td>会自动拆分成单独一行，前面还会显示对应的表头标签，用户一眼就能看懂内容对应的类别。

如果你可以调整现有结构，完全可以用你已经在使用的Bootstrap栅格类来替代表格，这样天然就支持响应式布局，不需要额外写复杂的媒体查询：

<div class="container-fluid">
  <!-- 表头：仅在大屏幕显示 -->
  <div class="row d-none d-sm-flex bg-light py-2">
    <div class="col-sm-6">用户名称</div>
    <div class="col-sm-6">联系方式</div>
  </div>

  <!-- 第一行内容 -->
  <div class="row py-2 border-bottom">
    <div class="col-sm-6">
      <span class="d-sm-none font-weight-bold">用户名称：</span> Jack
    </div>
    <div class="col-sm-6">
      <span class="d-sm-none font-weight-bold">联系方式：</span> jack@example.com
    </div>
  </div>

  <!-- 第二行内容 -->
  <div class="row py-2 border-bottom">
    <div class="col-sm-6">
      <span class="d-sm-none font-weight-bold">用户名称：</span> John
    </div>
    <div class="col-sm-6">
      <span class="d-sm-none font-weight-bold">联系方式：</span> john@example.com
    </div>
  </div>
</div>

这个方案里，大屏幕下是两列布局，和表格效果一致；小屏幕下每个内容块会自动占满一行，而且通过d-sm-none类只在小屏幕显示表头标签，完美适配你的差异化需求，还和你现有代码里的col-sm-6等类保持统一。

根据你的实际情况选一个就行啦，要是有具体的表格结构细节，还可以再调整~

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