表格单元格中具有100％宽度的按钮可防止Firefox中单元格的自动宽度

poke 发表于 Dev

戳

我想让一个按钮填充表格单元格，以使整个单元格都可单击。默认情况下，按钮具有自动宽度，因此我必须将其显式设置为100％宽度（display: block 不起作用）。但是这样做会使单元不再识别其自身的宽度。在Firefox中，使用以下命令将表嵌套在容器中时会出现问题overflow: scroll：

Firefox中的错误

在示例中可以看到，单元格中的文本从单元格中流出，并且单元格太小。所述的宽度可见宽度均等地在所有的细胞分布。在第二个示例中，我将按钮替换为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属性将其禁用？

隐藏的爱好

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

尽管在该错误报告中给出了以下事件，但似乎可以很快解决：

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

David Baron在2016-01-06 21:12回复

暂时获得所需的行为，最简单的更改似乎是：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-25

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

表格单元格中具有100％宽度的按钮可防止Firefox中单元格的自动宽度

表格单元格中具有100％宽度的按钮可防止Firefox中单元格的自动宽度

空的重叠CSS网格单元格可防止在Firefox和Edge中单击

CSS表格：可防止具有空单元格的表格折叠成一行？

CSS表格：可防止具有空单元格的表格折叠成一行？

CSS表格单元格100％宽度

表格单元格的宽度（％）

如何访问具有混合单元格宽度的表格集合中的各个列

在 Outlook 2013 中设置表格单元格的宽度

设置表格单元格相对于列中其他单元格的宽度

在表格单元格中具有高度为100％的图像的居中链接（导航按钮）

使表格单元格的边框为表格宽度的100％

使表格单元格的边框为表格宽度的100％

在单元格宽度也不同的情况下，如何在表格中自动换行？

使表格单元格为父级的100％宽度

CSS表格单元格未填充屏幕宽度的100％

使表格单元格为父级的100％宽度

表格单元格自动调整大小而不设置宽度

CSS：display：table; 宽度：100％; 在Firefox上无法处理单元格中的图像

Firefox表格单元格宽度与Chrome完全不同

无法更改表格单元格的宽度

显示：表格单元格宽度问题

表格单元格宽度均匀

显示单元格宽度：表格

表格单元格中的自动换行

具有最大宽度的表不包含宽度为100％的单元格数据

DIV表单元格宽度100％

DIV表单元格宽度100％

表格视图单元格中的按钮

ImageView宽度大于UITableView单元格中的单元格宽度-XCode 6

为什么在显示：表格单元格中，孩子的宽度不会扩展为父母的宽度？