将内联块元素添加到表格扩展列时，HTML表格列的宽度会发生变化

我有一个HTML表，它显示了许多不同产品的数据。产品数据的每一行后面都有一个表，该表跨越一行，显示有关产品的更多详细信息。在我的表格中，我允许用户根据自己的意愿显示或隐藏这些详细信息。我的问题是，当显示此数据时，列宽会调整大小，即使详细信息行横跨整个表。我已将问题缩小到详细信息行中存在的

内联块

元素。当这些元素换行时，由于某种原因，列宽会受到影响

在下图中，您可以看到此小提琴的效果：。由于第二个表的详细信息部分中的换行

内联块

元素，列的宽度都略有变化，否则与第一个表相同。这里的效果不是很大，但在我的实际应用程序中，表的移动足以让用户感到恼火。我想知道为什么会发生这种情况，以及如何预防这种情况

---

很有趣。我相信一行中有两个计算：首先计算表的“自然”宽度（这将使第一个表比第二个表窄），然后重新计算第一个表，为每列添加一些空间，因为它需要100%宽。这显然会导致每列的宽度不同。但是我想不出一个解决办法。对我来说，如果我一直调整小提琴的大小直到最后一个世界什么？换行到下一行，这是换行到两行的第一个。没有什么奇怪的，因为没有足够的宽度来保持每一个字在一行。。。在两张桌子上。这可能与我的浏览器使用的字体以及两者之间的空白有关divs@G-Cyr tns不是关于最下面一行的布局，而是关于上面列的宽度，在OP的屏幕截图中，你可以通过单词换行看到第二列稍微窄一点。对，我明白了，因此，表的自然宽度由所有

内联块

元素分布的宽度设置，而不进行包装。然后重新计算步骤从不同的起点开始。也许我必须对细节项使用某种固定的布局。@jdnz如果您使用

表布局：fixed

，则列的宽度将与第一行单元格的宽度相同。这在示例代码中非常有效，其中th的内容最广泛。我相信一行中有两个计算：首先计算表的“自然”宽度（这将使第一个表比第二个表窄），然后重新计算第一个表，为每列添加一些空间，因为它需要100%宽。这显然会导致每列的宽度不同。但是我想不出一个解决办法。对我来说，如果我一直调整小提琴的大小直到最后一个世界什么？换行到下一行，这是换行到两行的第一个。没有什么奇怪的，因为没有足够的宽度来保持每一个字在一行。。。在两张桌子上。这可能与我的浏览器使用的字体以及两者之间的空白有关divs@G-Cyr tns不是关于最下面一行的布局，而是关于上面列的宽度，在OP的屏幕截图中，你可以通过单词换行看到第二列稍微窄一点。对，我明白了，因此，表的自然宽度由所有

内联块

元素分布的宽度设置，而不进行包装。然后重新计算步骤从不同的起点开始。也许我必须对细节项使用某种固定的布局。@jdnz如果您使用

表布局：fixed

，则列的宽度将与第一行单元格的宽度相同。这在示例代码中非常有效，其中th的内容最广泛。