时间戳

首页 > 解决方案 > 无论 td 内容如何，​​都保持 HTML 表格可变宽度

html - 无论 td 内容如何，​​都保持 HTML 表格可变宽度

问题描述

我有一个 html 表格，随着浏览器窗口被拖得越来越窄，它变得越来越窄。此表中的每一行最初都包含汇总数据列，并且每一行都有一个图标，单击该图标将在汇总行下方打开一个新的动态表行，并且我想在其中显示另一个包含详细信息的表。

我的问题是出现在每个动态添加的表行中的明细表非常宽。为了防止外部表变宽以容纳内部详细信息表，我添加了一个样式为overflow-x的div：滚动；在详细信息的 td 标签内；然而，虽然它增加了水平滚动条，但主表也变宽以容纳内部细节表。我希望主表保留它的宽度和布局，而不管动态添加的行中放入了什么。

我发现如果我把 table-layout: fixed; 在外部表格标记上，该表格在出现时停止扩大以容纳内部详细信息表格，并且滚动工作正常，但它的缺点是使我的所有主表格的列具有相同的宽度。

有谁知道一种更好的方法来保持外部表格能够随着浏览器窗口增长和缩小，但在显示宽的内部内容时阻止它变宽？

标签： htmljquerycss

解决方案

有两种解决方案。

  1. table-layout: fixed本质上不会使所有列的宽度相同。您可以使用<col>标签来指定列宽。问题是您不能在此方法中使用自动计算的列宽。

  2. 添加style='position: relative'到<td>外部表的问题。在其中添加<div style='position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto'>作为内表的容器。<td>您可以指定withwidth属性的宽度。

推荐阅读