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

Question

我想制作一个按钮填充表格单元格以使整个单元格可单击。默认情况下，该按钮具有自动宽度，因此我必须明确表示100％宽度（display: block doesn’t work）。但这样做会使细胞不再识别自己的宽度。在Firefox中，将表嵌套在具有overflow: scroll的容器中时，这是一个问题：

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您是否知道如何使用按钮使单元格达到所需的宽度？我现在的另一种选择是使用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太平洋标准时间的回复

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

• 在width: 100%;
上将min-width: 100%;更改为.table button

.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>