html - 使用 HTML/CSS 使表格在移动设备上响应

Question

我有这个表格，它是一封较大的电子邮件的一部分。当用户的设备是手机或小屏幕时，我希望表格从 2 列/2 行变为 1 列 4 行。想使用尽可能少的代码。

<table style="width:100%;table-layout:fixed;border-collapse:separate !important;border-spacing:20px 40px; font-family:Helvetica, Arial, sans-serif; color:#333333; font-size:16px; line-height:24px; font-weight:100;" class="bodywrapcenter">
  <tr>
    <td>
      Dr. Andrew Borg<br>
      Chapter Advisor<br>
      aborg@example.edu<br>
    </td>
    <td>
      Stuart J. Sigman, PhD<br>
      Dean, College of Arts and Sciences<br>
    </td>
  </tr>
  <tr>
    <td>
      Dr. Dale Mancini<br>
      Chapter Advisor<br>
      dmancini@example.edu<br>
    </td>
    <td>
      David DeHaven, PhD<br>
      Dean, Graduate School of Business and Management<br>
    </td>
  </tr>
</table>

Answer 1

尝试将 Bootstrap 用于响应式表格。

.table-responsive 类创建响应表。然后该表格将在小型设备(小于 768 像素)上水平滚动。在大于 768 像素宽的任何内容上查看时。

根据需要使用 .table-responsive{-sm|-md|-lg|-xl} 创建到特定断点的响应表。从该断点开始，表格将正常运行并且不会水平滚动。