title: Button with 100% width in table cell prevents auto width of cell in Firefox
body: <p>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 (<code>display: block</code> <a href="https://stackoverflow.com/q/16584890/216074">doesn’t work</a>). 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 <code>overflow: scroll</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/06fkm.png" alt="Bug in Firefox"></p>
  
  <p>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 <em>visible width</em> 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 <code>width: 100%</code>).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;table class="table"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;button&gt;Some long table header A&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Some long table header B&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Some long table header C&lt;/button&gt;&lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;table class="table"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;div&gt;Some long table header A&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;Some long table header B&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div&gt;Some long table header C&lt;/div&gt;&lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;table class="table"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;button&gt;Table header A&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Table header B&lt;/button&gt;&lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Table header C&lt;/button&gt;&lt;/td&gt;
       &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Some long table content&lt;/td&gt;
        &lt;td&gt;Some long table content&lt;/td&gt;
        &lt;td&gt;Some long table content&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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).</p>
  
  <p>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?</p>