Html 表格单元格中100%宽度的按钮可防止Firefox中单元格的自动宽度

我想让一个按钮填充一个表格单元格，使整个单元格都可以点击。默认情况下，按钮具有自动宽度，因此我必须将其显式设置为100%宽度（

display:block

）。但这样做会使细胞不再识别自己的宽度。在Firefox中，将表嵌套在带有

溢出：滚动
的容器中时会出现问题：


正如您在示例中所看到的，单元格中的文本从单元格中流出，并且单元格太小。可见宽度的宽度均匀分布在所有单元格中。在第二个示例中，我用div替换了按钮，但没有显示问题：单元格正确地获得了所需的宽度。第三个示例显示了一个更真实的用例，第二行使列更宽（这就是按钮需要具有
宽度：100%
）


.wrapper{
宽度：250px；
溢出-x：滚动；
背景：靛蓝；
边缘底部：1米；
}
.桌子{
空白：nowrap；
}
.表td{
背景：薰衣草；
}
.表格按钮{
字体：继承；
边界：0；
背景：无；
填充：0；
宽度：100%；
}

一些长长的桌头
一些长的表格标题B
一些长的表格标题C
一些长长的桌头
一些长的表格标题B
一些长的表格标题C
表格标题A
表格标题B
表格标题C
一些长表内容
一些长表内容
一些长表内容
这似乎是Firefox中的一个bug。描述您的问题的错误报告已在此处存档

尽管在该错误报告中出现了以下事件，但看起来它可能很快得到修复：

我认为我对bug 823483的补丁将解决这个问题（因为它们以一种方式扩展了怪癖（也最大宽度），并以另一种方式限制它（更少的帧类型）；后者在这里很重要）；只需要完成它们（并找出为什么我写的测试没有全部通过）

David Baron在太平洋标准时间2016-01-06 21:12:31的回复

目前，为了获得所需的行为，最简单的改变似乎是：


更改<代码>宽度：100%至<代码>最小宽度：100%打开
。表格按钮


.wrapper{
宽度：250px；
溢出-x：滚动；
背景：靛蓝；
边缘底部：1米；
}
.桌子{
空白：nowrap；
}
.表td{
背景：薰衣草；
}
.表格按钮{
字体：继承；
边界：0；
背景：无；
填充：0；
最小宽度：100%；
}

一些长长的桌头
一些长的表格标题B
一些长的表格标题C
一些长长的桌头
一些长的表格标题B
一些长的表格标题C
表格标题A
表格标题B
表格标题C
一些长表内容
一些长表内容
一些长表内容
我假设你在Firefox中，对吗？因为我认为Chrome或IE没有问题。@JoshCrozier是的，你说得对。当我发布这篇文章时，我记得在其他浏览器中再次检查它。它似乎是特定于Firefox的（这只会使这个问题在imo xD中变得更糟）。我更新了这个问题以反映这一点。我删除了css中的.table按钮的宽度：100%，它对我来说很好@ChrisG，但是按钮将不会填充单元格。因此，如果列中有另一个单元格使列变宽，则按钮仍将只填充所需的空间，而不是可用的空间。我将创建一个提琴，看看是否无法使其工作：）即将发布该按钮！；）我接受这一点，因为
最小宽度
似乎是问题的原因。我发现它很好地描述了这个问题，并且说带有
宽度：100%
的按钮显然得到了一个内在的
最小宽度：0
，这导致了这个问题。因此，明确地设置
min width
可以解决这个问题。非常好地找到@hiddenhobes！再加一个给你@poke看起来有一些关于这个问题的bug报告，希望它能很快得到解决。修复程序昨天在mozilla central上发布，而在今天的Firefox夜间构建中，问题消失了！