如何创建支持动态宽度调整的横向滚动表格？

核心思路 #

要满足需求，关键是区分两种单元格的行为：无最大宽度限制的单元格保持内容不换行以适配宽度，有最大宽度限制的单元格允许内容换行并限制列宽。同时让表格根据内容自然扩展，超出容器时触发横向滚动。

实现代码 #

CSS 样式

.container {
  overflow: auto; /* 开启横向滚动 */
}

table {
  border-collapse: collapse;
  border: 1px solid #000;
}

th, td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap; /* 默认不换行，列宽自适应内容 */
}

/* 带最大宽度限制的列 */
.max-width-col {
  max-width: 200px; /* 自定义最大宽度 */
  white-space: normal; /* 允许内容换行 */
}

/* 响应式断点：小屏幕调整最大宽度 */
@media (max-width: 768px) {
  .max-width-col {
    max-width: 150px;
  }
}

HTML 结构

给需要限制最大宽度的表头和单元格添加 .max-width-col 类：

<div class="container">
    <table>
        <tr>
            <th class="max-width-col">Weatherometer</th>
            <th>Rhabdophobia</th>
            <th>Batrachophagous</th>
            <th>Logizomechanophobia</th>
            <th>Zalambdodont</th>
            <th>Honorificabilitudinitatibus</th>
            <th>Kakorrhaphiophobia</th>
            <th>Maschalephidrosis</th>
            <th>Ubiquitarianism</th>
            <th>Micropalaeontology</th>
            <th>Ecclesiasticus</th>
            <th>Libanophorous</th>
            <th>Graminivorous</th>
            <th>Paleophytologist</th>
            <th>Zalambdodont</th>
            <th>Metathesiophobia</th>
            <th>Fissigemmation</th>
            <th>Whippersnappers</th>
            <th>Ablutophobia</th>
            <th>Otorhinolaryngology</th>
            <th>Palaeoanthropology</th>
            <th>Umbraculiform</th>
            <th>Quadragesimarian</th>
            <th>Immunopathology</th>
            <th>Ostraconophobia</th>
            <th>Roentgenometrics</th>
            <th>Ballistocardiograph</th>
        </tr>
        <tr>
            <td class="max-width-col">Instrument for measuring weather-resisting properties of paint</td>
            <td>Fear of being severely punished or beaten by a rod, or of being severely criticized</td>
            <td>A person who eats frogs</td>
            <td>Fear of computers</td>
            <td>Having molar teeth with V-shaped ridges</td>
            <td>One bearing honorableness</td>
            <td>Fear of failure</td>
            <td>Excessive sweating of the armpits</td>
            <td>Belief in the omnipresence of God</td>
            <td>Study of microscopic fossils</td>
            <td>An Apocryphal book</td>
            <td>Producing incense</td>
            <td>Feeding on grass or cereals</td>
            <td>One versed in the recovery and identification of plant fossils from geological contexts</td>
            <td>Having molar teeth with V-shaped ridges</td>
            <td>Fear of changes</td>
            <td>A process of reproduction that intercedes fission and gemmation</td>
            <td>People considered insignificant and pretentious</td>
            <td>Fear of washing or having a bath</td>
            <td>It is a study of ear, nose, and throat</td>
            <td>The study of early humans</td>
            <td>Umbrella-shaped</td>
            <td>One who observes Lent</td>
            <td>Study of immunity to disease</td>
            <td>Fear of shellfish</td>
            <td>A chiropractic technique involving the study of X-rays by biomechanical analysis and measurement</td>
            <td>An instrument which is used to detect body movements caused by heartbeats</td>
        </tr>
    </table>
</div>

效果说明 #

1. 无最大宽度的列：通过 white-space: nowrap 强制内容不换行，列宽完全适配内容长度，不会占用多余空间。
2. 有最大宽度的列：添加类后，内容会在达到最大宽度时自动换行，列宽被限制在设定值内。
3. 横向滚动：当表格总宽度超过容器宽度时，容器自动显示横向滚动条，所有列均可访问。
4. 多语言适配：该方案自动适配日语、俄语等不同语言的内容长度，短内容列占用更少空间，避免浪费布局空间。

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