html - 将内联块元素添加到表格跨越列时，HTML 表格列的宽度会发生变化

Question

我有一个 HTML 表格，它显示来自许多不同产品的数据。每行产品数据后面都有一个跨行的表格，显示有关产品的更多详细信息。在我的表格中，我允许用户根据需要显示或隐藏这些详细信息。我遇到的问题是，当显示此数据时，即使详细信息行跨越整个表格，列宽也会调整大小。我已将问题缩小到inline-block详细信息行中存在的元素。当这些元素换行时，由于某种原因，列宽会受到影响。

在下图中，您可以看到取自这个小提琴的效果：https ://jsfiddle.net/6qanb8dk/ 。由于第二个表的详细信息部分中的包装元素，列的宽度都略有变化inline-block，这与第一个表相同。在这里效果并不大，但在我的实际应用程序中，表格移动得足以让用户感到厌烦。我想知道为什么会发生这种情况以及如何预防。

标签： htmlcsshtml-table