无法调整超出某个最小宽度的表

Question

这是一个演示页面：

http://bridgetandmisha.com/resize_sizes.html#

为什么我无法使用此代码将其中一个表调整为400px：

$("#countProductSummaryDetailTable").width(400)

有人能告诉我html标记阻止了什么吗？

此外，我能够将页面上的另一个表格调整为400px（但这不是我需要的）：

$("#countProductSummaryHeaderTable").width(400)

Answer 1

非常确定这是因为您在所有列上都设置了显式宽度。它们总计达1013px，并且表格不会比这更小，因为它的列不适合它（这是不合法的）。例如，如果我将两个200px列（产品名称和类别）分别缩小到100px，那么表格将调整为813px，但不会小于此值。

Answer 2

这些jQuery行的作用是将style="width: 400px"添加到这些表元素中。如果你检查DOM，你会发现他们都成功了。

但是，您还在某些表格的单元格上设置了显式宽度。对于细节表，这些宽度加起来约为900像素。对于标题表，它们总计约500像素。在表格中，这些宽度指定了列的最小宽度。

因此，调整大小失败的原因是因为表格的列强制表格上的最小宽度大于您想要的400像素。

另请注意，第二次调整大小也失败了。该表最终不是400像素宽，但由于同样的原因接近500.