Setting a <button>'s display as table-cell - html

Question

I'm trying to set a button's display property as table-cell but it doesn't behave like one.
Any help would be appreciated.
jsFiddle Demo (The demo contains a fixed container height, but I need it to work without it).
No fixed sizes Demo.
DOM:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<button class="item"></button>
</div>
CSS:
.container {
border: 5px solid blue;
display: table;
table-layout: fixed;
}
.item {
border: 3px solid red;
display: table-cell;
}
The result:
Edit: I need it to work entirely like a table cell, even without fixed sizes.
Note that some solutions seem to work fine on Chrome but don't work on FF.

Answer 1

How about using a label? That way you get the functionality of the button, but the visibility of the label. Tested in Firefox and Chrome. Updated example for form submission.
No JavaScript is involved with the clickability of the cell region
Works without a fixed height on the container
Works when a different cell has a larger height than the one with the button
Works with multiple button cells
HTML:
<form onsubmit="alert(); return false;">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container">
<div class="item">4</div>
<div class="item">5<br><br><br>Extended cell</div>
<label class="item">Button 1<button type="submit"></button></label>
<label class="item">Button 2<button type="submit"></button></label>
</div>
</form>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
}
.item button {
background-color: transparent;
position: absolute;
left: -1000px;
height: 1px;
width: 1px;
overflow: hidden;
}
JSFiddle here.

Answer 2

http://jsfiddle.net/Rhhh7/7/
In this example I've wrapped the button in the div class="item" just like the other div's. But this time, I've styled the button separately to stretch to the height and width of the div.
.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}
EDIT:
Here's the fix http://jsfiddle.net/Rhhh7/10/
To address the Firefox issue.
Add this to the class "item":
.item {
border: 3px solid red;
display: table-cell;
height:100%;
vertical-align:top;
}
In order for the td to have a height of 100%, the parent must have height of 100% as well. The vertical-align:top then sets the button to the top of the div instead of the default, middle.

Answer 3

button.item { width: 100%; height: 50px; }

Answer 4

You could always just wrap the button in a div.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"><button>Button</button></div>
</div>
CSS
button{
width:100%;
height:2.75rem;
}
So I guess at the end of the day, the final solution here is it might not be possible cross-browser without a fixed unit of measurement :(

Answer 5

this seems to work:
HTML
<div class="container">
<div class="item">Some text to make the cell bigger</div>
<div class="item"></div>
<div class="item"><button class="button-item"></button></div>
</div>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
background: transparent;
}
.button-item{
border: 5px;
-moz-border:5px;
height:100%;
width: 100%;
}
Fiddle Demo
How it looks on FF:

Answer 6

Wrapping in a div is a solution but I can't understand why you cannot change the display property for button elements like you can all other elements. For example you can make a link tag act like a div tag.
This prevents doing stuff like changing the display order of buttons:
http://codepen.io/bakers37/pen/emoKvK
In Chrome/Firefox this doesn't work as expected.
HTML
<div class="wrap">
<div class="btn bottom">Back</div>
<div class="btn top">Continue</div>
</div>
<div class="wrap">
<button class="btn bottom">Back</button>
<button class="btn top">Continue</button>
</div>
CSS
.wrap {
display: table;
margin: 20px 0 30px 0;
width: 100%;
}
.btn
{
display: block;
width: 100%;
margin: 5px 20px;
padding: 10px;
position: relative;
background: #ccc;
}
.top {
display: table-caption;
}