<table>表格单元格宽度自适应的关键：width: max-content随着chatgpt的“横空出世”，其带来的

前言

随着chatgpt的“横空出世”，其带来的能力迅速引爆全球，破圈层讨论，让世人惊喜。国内的AI智能助手如：文心一言、豆包、kimi等也紧随其后。为了更快地进入人工智能领域，各个大厂也在积极探索AI大模型的应用场景，如支付宝的蚂小财、招商银行的AI小招等。现在的大模型几乎都支持了markdown文本，这给前端展示提供了更多丰富的交互。

笔者最近在处理大模型输出的markdown文本时，遇到了table样式问题。

最初谁也没想到这会是个问题😭

`table`结构

先来举个栗子：一个基础原生table标签

<div class="app">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>第一</td>
        <td>这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容</td>
        <td>这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容这是内容内容</td>
        <td>这是内容内容这是内容内容这是内容内容</td>
      </tr>
      <tr>
        <td>第二</td>
        <td>这是内容内容这是内容内容</td>
        <td>这是内容内容这是内容内容</td>
        <td>这是内容内容这是内容内容</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 再来点好看的样式 -->
<style>
.app {
  width: 375px;
  padding: 20px;
  background-color: #eee;
}
table {
  background-color: #fff;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-radius: 4px;
}
table thead {
  background-color: #f8f8f8;
}
table th,
table td {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 10px;
}
table th:first-child,
table td:first-child {
  border-left: 0;
}
table tr:first-child th {
  border-top: 0;
}
</style>

效果如下图：截屏2024-11-25 18.59.35.png

可以看到单元格文本数据被挤压得非常难看，这个时候我们可以想到：

表头不换行
单元格宽度设置最小宽度
支持横向滚动

.app {
+ overflow: auto;
}

table thead {
  background-color: #f8f8f8;
+ white-space: nowrap;  
}

+ table td {
+  min-width: 100px;
+}

经过css优化后的展示好了很多，也支持横向滚动查看：截屏2024-11-25 19.06.46.png

此时，细心的网友发现了，第1列的文本很少，第2-3列的文本很多，但是它们拥有一样的列宽度，使得单元格的空间利用并没有达到和谐。由于这表格数据是大模型生成的，源数据我们并不能提前得知，也不能固定每列宽度。

作为产品经理，期望在文本少的时候可以占据较小的宽度，文本多的时候可以占较大的宽度，来更好地展示表格的数据。

一番倒腾，调整table宽度100%，设置单元格最大、最小宽度，发现都不能达到效果，在搜索引擎里检索“表格宽度的自适应”也没有对应答案。正当内心想要劝说产品经理放弃实现时，偶然发现了没有见过、没有使用过的width的值max-content/min-content/fit-content。

通过这篇文章详细了解，张鑫旭博客：理解CSS3 max/min-content及fit-content等width值

说干就干！

table {
  ...
+ width: max-content;
}

// 这里我期望最小宽度就是文本的宽度，所以删除了min-width
// 添加了max-width属性，当单元格文本很多的时候达到最大宽度可以实现换行展示
table td {
-  min-width: 100px;
+  max-width: 200px;
}

完美地达到了想要的效果，如果希望能保障一个最小宽度可以设置单元格min-width: 50px。截屏2024-11-25 20.03.36.png

兴高采烈地去测试大模型文本的效果，发现还是有点瑕疵。当文本数据较少时，表格未占据100%，导致表格宽度较小。可以看到右侧空白空间的不协调，期望表格在数据较少时可以100%展示。截屏2024-11-25 20.09.39.png

这一步就好操作了，为表格添加一个最小宽度100%即可。

table {
  ...
  width: max-content;
+ min-width: 100%;
}

截屏2024-11-25 20.14.25.png

这样一看，效果完美撒花！🎉🎉前期折腾了不少时间，其实1个属性值就可以解决，还是笔者对css掌握得少了。

贴心地附上代码：

最后

现在各个大厂都在尝试将大模型引入到自家的产品中，为用户带来更好的交互体验。前期笔者也体验过部分App对大模型markdown文本处理的程度，效果各有千秋，大部分只支持简单的样式，不过产品也都在快速迭代中。牛马的命也是命啊。

如果你正在处理相同的数据，遇到了相同的问题，而这篇文刚好给你带来了思路，不妨在评论区告诉我，希望有帮到你。

<table>表格单元格宽度自适应的关键：width: max-content

前言

table结构

最后

`table`结构