如何避免使用display:block实现HTML表格的响应式效果

解决方案 #

你只需要调整两处代码即可同时满足所有需求：

1. 给table外层新增一个独立的滚动容器，调整HTML结构如下：

<div class="container">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
  <!-- 新增的滚动容器 -->
  <div class="table-scroll-wrapper">
    <table>
      <!-- 原有table内容不变 -->
      <thead>
        <tr>
          <th>SDK</th>
          <th>Default namespaces</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Microsoft.NET.Sdk</td>
          <td><code class="language-inline-text">System.Collections.Generic</code></td>
        </tr>
        <tr>
          <td>Microsoft.NET.Sdk.Web</td>
          <td><code class="language-inline-text">System.Net.Http.Json</code></td>
        </tr>
      </tbody>
    </table>
  </div>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
</div>

2. 新增滚动容器的CSS样式，同时回退table的修改：

/* 新增的滚动容器样式 */
.table-scroll-wrapper {
  overflow-x: auto;
  width: 100%;
}

table {
  /* 删掉你之前加的display:block，保留原有其他样式 */
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1)
    var(--global-border-width-1);
  border-spacing: 0;
  width: 100%;
  /* 删掉table上的overflow:auto，滚动逻辑交给外层容器 */
  /* 其余thead、tbody的样式全部保留不变 */
}

原理解释 #

你之前直接给table加display:block会破坏原生表格的布局特性，导致表格默认宽度跟随内容撑开，无法在宽屏时占满父容器。把滚动逻辑剥离到外层独立容器后，table本身保留原生display:table特性，宽屏时width:100%会自动占满可用空间，窄屏时外层容器自动出现横向滚动条，原有表格的边框、圆角等样式完全不会被影响。

内容的提问来源于stack exchange，提问作者Muhammad Rehan Saeed