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

Question

我想让一个按钮填充表格单元格以使整个单元格可点击。默认情况下，按钮具有自动宽度，因此我必须明确地将其设为 100% 宽度（display: blockdoesn’t work）。但是这样做会使单元格不再识别自己的宽度。在 Firefox 中，当使用overflow: scroll 将表嵌套在容器中时，这是一个问题：

正如您在示例中看到的那样，单元格中的文本从单元格中流出，而单元格太小了。 可见宽度的宽度均匀分布在所有单元格中。在第二个示例中，我用 div 替换了按钮，这没有显示问题：单元格正确地获得了所需的宽度。第三个示例显示了一个更真实的用例，第二行使列更宽（这就是按钮需要有width: 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>

您知道如何使用按钮使单元格具有所需的宽度吗？我现在的替代方法是使用 div 并向它们添加 ARIA 角色，因此它们的行为就像按钮（但感觉有点脏）。

该问题未出现在 Chrome 或 Internet Explorer 中，因此可能有一些与 Firefox 相关的样式添加到按钮中。也许可以使用特定于浏览器的 CSS 属性来禁用它？

Answer 1

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

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

我认为我对错误 823483 的修补程序将解决此问题（因为它们以一种方式扩展怪癖（最大宽度也是）并将其限制在另一种方式（更少的帧类型）；后者在这里很重要）；只需要完成它们（并弄清楚为什么我写的测试没有全部通过）......

David Baron 于 2016-01-06 21:12:31 PST 回复

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

• 在.table button 上将width: 100%; 更改为min-width: 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;
  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>