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

I want to make a button fill a table cell to make the whole cell clickable. By default, the button has an auto-width, so I have to make it explicitly 100% width (display: block doesn’t work). But doing that will make the cell no longer recognize its own width. In Firefox, this is a problem when nesting the table in a container with overflow: scroll:

我想让一个按钮填充表格单元格，使整个单元格可点击。默认情况下，按钮有一个自动宽度，所以我必须显式地将它设置为100%宽度(display: block不起作用)。但是这样做会使细胞不再识别自己的宽度。在Firefox中，当在容器中嵌套时，这是一个问题:

As you can see in the example, the text from the cells flows out of the cells, and the cells are far too small. The width of the visible width is equally distributed across all cells. In the second example, I replaced the button by a div, which does not show the problem: The cells correctly get the width they require. The third example shows a more real use case with a second row making the columns wider (which is the reason the buttons need to have width: 100%).

正如您在示例中看到的，来自单元格的文本从单元格中流出，而单元格太小了。可见宽度的宽度分布在所有单元格上。在第二个示例中，我用一个div替换了按钮，该div没有显示问题:单元格正确地获得了所需的宽度。第三个例子显示了一个更真实的用例，第二行使列更宽(这就是按钮需要宽度为100%的原因)。

.wrapper {
  width: 250px;
  overflow-x: scroll;
  background: indigo;
  margin-bottom: 1em;
}
.table {
  white-space: nowrap;
}
.table td {
  background: lavender;
}
.table button {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td><button>Some long table header A</button></td>
      <td><button>Some long table header B</button></td>
      <td><button>Some long table header C</button></td>
     </tr>
  </table>
</div>

<div class="wrapper">
  <table class="table">
    <tr>
      <td><div>Some long table header A</div></td>
      <td><div>Some long table header B</div></td>
      <td><div>Some long table header C</div></td>
     </tr>
  </table>
</div>

<div class="wrapper">
  <table class="table">
    <tr>
      <td><button>Table header A</button></td>
      <td><button>Table header B</button></td>
      <td><button>Table header C</button></td>
     </tr>
    <tr>
      <td>Some long table content</td>
      <td>Some long table content</td>
      <td>Some long table content</td>
    </tr>
  </table>
</div>

Do you have any idea how to make the cell take its required width with buttons? My alternative right now is to use divs and add ARIA roles to them, so they behave like buttons (but that feels kind of dirty).

你知道怎么用按钮让单元格达到要求的宽度吗?我现在的选择是使用divs并为它们添加ARIA角色，因此它们的行为就像按钮(但是感觉有点脏)。

The problem does not appear in Chrome or Internet Explorer, so there might be some Firefox-related style that is added to the button. Maybe it’s possible to disable that with a browser-specific CSS property?

这个问题不会出现在Chrome或Internet Explorer中，所以可能会有一些与firefox相关的样式被添加到按钮中。也许可以使用特定于浏览器的CSS属性来禁用它?

1 个解决方案

#1

This appears to be a bug in Firefox. A bug report describing your issue has been filed here https://bugzilla.mozilla.org/show_bug.cgi?id=332171.

这似乎是Firefox中的一个bug。描述您的问题的错误报告已经提交到这里:https://bugzilla.mozilla.org/show_bug.cgi?id=332171。

Looks like it could be fixed soon though given the following event in that bug report:

看起来它可能很快就会被修复，尽管在那个bug报告中有如下事件:

I think my patches to bug 823483 will fix this (since they expand the quirk in one way (max-width too) and restrict it in another (fewer frame types); the latter is what matters here); just need to finish them (and figure out why the tests I wrote weren't all passing)...

我认为我的bug 823483的补丁会修复这个问题(因为它们以一种方式扩展了怪癖(最大宽度也是)，并限制在另一种方式(更少的帧类型);后者才是最重要的);只需要完成它们(并弄清楚为什么我写的测试不是全部通过)……

Response by David Baron at 2016-01-06 21:12:31 PST

大卫·巴伦在2016-01-06 21:12:31 PST的回复。

For the time being to get the desired behaviour the simplest change seems to be:

就目前而言，想要得到想要的行为，最简单的改变似乎是:

• Change width: 100%; to min-width: 100%; on .table button
• 改变宽度:100%;min-width:100%;.table按钮上

.wrapper {
  width: 250px;
  overflow-x: scroll;
  background: indigo;
  margin-bottom: 1em;
}
.table {
  white-space: nowrap;
}
.table td {
  background: lavender;
}
.table button {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  min-width: 100%;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td><button>Some long table header A</button></td>
      <td><button>Some long table header B</button></td>
      <td><button>Some long table header C</button></td>
     </tr>
  </table>
</div>

<div class="wrapper">
  <table class="table">
    <tr>
      <td><div>Some long table header A</div></td>
      <td><div>Some long table header B</div></td>
      <td><div>Some long table header C</div></td>
     </tr>
  </table>
</div>

<div class="wrapper">
  <table class="table">
    <tr>
      <td><button>Table header A</button></td>
      <td><button>Table header B</button></td>
      <td><button>Table header C</button></td>
     </tr>
    <tr>
      <td>Some long table content</td>
      <td>Some long table content</td>
      <td>Some long table content</td>
    </tr>
  </table>
</div>