Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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.

like image 429
Itay Avatar asked Oct 23 '13 12:10

Itay


2 Answers

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.

like image 90
jsea Avatar answered Sep 28 '22 00:09

jsea


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.

like image 42
Joel Worsham Avatar answered Sep 28 '22 01:09

Joel Worsham