Button with 100% width in table cell prevents auto width of cell in Firefox

Question

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:

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

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

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?

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

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

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

Response by David Baron at 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

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