html - 表格单元格中宽度为 100% 的按钮会阻止 Firefox 中单元格的自动宽度

Question

我想让一个按钮填充一个表格单元格，使整个单元格都可以点击。默认情况下，该按钮具有自动宽度，因此我必须将其明确设置为 100% 宽度 (display: block doesn’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 Angular 色，因此它们的行为类似于按钮(但感觉有点脏)。

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

Answer 1

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

尽管在该错误报告中给出了以下事件，但看起来它很快就会被修复:

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

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

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

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