31

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:

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.

Itay
  • 16,601
  • 2
  • 51
  • 72
  • 3
    table-cell will not work on buttons, you can use inline style to fit exactly. http://stackoverflow.com/questions/12414573/display-table-cell-border-spacing-dont-work-with-buttons – Bharath R Oct 23 '13 at 12:36
  • 4
    Really u r screwing us with this question :) good one – Dinesh Kanivu Oct 23 '13 at 12:49
  • 4
    While most people here are blinded with a 50rep bounty, I'd like to simply ask: what is your purpose here? Why the ` – matewka Oct 25 '13 at 13:21
  • 3
    This is a good question. I need this element to submit (`button type='submit'`) a form, and I don't want to use JS for this simple task. Right now I'm using JS because I couldn't find any other solution. Further more it's an interesting issue :) – Itay Oct 25 '13 at 13:25
  • Just tested, your [No fixed sizes Demo](http://jsfiddle.net/itay1989/Rhhh7/5/) works as expected in IE9. –  Oct 28 '13 at 03:16
  • @LegoStormtroopr I need it to work on FF also. – Itay Oct 28 '13 at 07:48
  • it's probably a webkit problem. Chrome ignores table-cell display on buttons, while Edge, IE and Firefox do respect it. – tec-goblin Jun 28 '16 at 10:29

6 Answers6

15

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.

jsea
  • 3,859
  • 1
  • 17
  • 21
  • Wow! This is an excellent solution. However, I can't use clip because I need it to be supported on IE8. Do you have another idea for this focusing issue? – Itay Oct 28 '13 at 07:58
  • I've updated the code to work with IE8. `clip` wasn't necessary. Just moving it offscreen is enough for it to work. As a side note, `clip` does work in IE8 and below, you just have to use its non-standard way of writing it I believe: `clip: rect(1px 1px 1px 1px);` – jsea Oct 28 '13 at 09:15
  • 1
    The main issue with this is that labels cannot be focused using tab, the real issue here is certain html elements don't technically allow display changes although some browsers will accept them. https://stackoverflow.com/a/37445333/1213795 – Mike Mellor Jun 20 '17 at 15:48
  • Good point! Thanks for the insight and link! I hadn't considered that at the time. Not being able to focus on the button via tab is a horrible oversight on my part. Hopefully, it can be modified so that the hidden button can still be focused on. I haven't done web programming for a few years now. Obviously, the best solution is to just seek other solutions than trying to fit a square peg into a round hole though. – jsea Jun 21 '17 at 23:53
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.

Joel Worsham
  • 1,140
  • 1
  • 7
  • 19
  • Looks like the border of the button is screwing with us. +1, but i'm still wondering why the border is doing that. – nkmol Oct 23 '13 at 13:39
  • 1
    Thanks but it still doesn't work without a fixed height on the container – Itay Oct 23 '13 at 13:53
  • Even with "height:100%", it's still dynamic to the contents of each "cell" – Joel Worsham Oct 23 '13 at 13:54
  • I've commented on this twice already deleting the previous ones, but I've tested this in Firefox again (because I thought it was a working solution), and it doesn't stretch the clickable region of the button cell if the second column is taller (in Firefox). See here: http://jsfiddle.net/Rhhh7/16/ – jsea Oct 27 '13 at 23:12
0

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 :(

0

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:

enter image description here

Siddharth Patel
  • 193
  • 1
  • 2
  • 15
0

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; 
}
vibesniper
  • 100
  • 1
  • 6
-1

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

  • It's not bad but it doesn't work if I have multiple buttons. http://jsfiddle.net/itay1989/Rhhh7/2/ – Itay Oct 23 '13 at 12:36
  • +1 For your solution but I can't find anything that fits FF as well :S – Itay Oct 23 '13 at 12:49