I want a button to populate a table cell to make the whole cell available. By default, the button has an automatic width, so I have to make it explicitly 100% wide ( display: blockdoesn't work ). But at the same time, the cell will cease to recognize its own width. In Firefox, this is a problem when placing a table in a container with overflow: scroll:
As you can see in this example, text from the cells exits the cells, and the cells are too small. The width of the visible width is equally distributed across all cells. In the second example, I replaced the button with a div, which does not show the problem: the cells correctly get the required width. The third example shows a more realistic use case when the second row makes the columns wider (for this reason the buttons should 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 ideas how to make the cell the required width using the buttons? My alternative right now is to use divs and add ARIA roles to them, so they behave like buttons (but that seems messy).
Chrome Internet Explorer, , Firefox. , CSS-, ?