Настройка отображения <button> в виде таблицы-ячейки

Я пытаюсь установить свойство button display как table-cell, но он не ведет себя как один.

Любая помощь будет оценена по достоинству.

jsFiddle 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

Изменить: Мне нужно, чтобы он работал полностью как ячейка таблицы, даже без фиксированных размеров.

Обратите внимание, что некоторые решения, похоже, отлично работают на Chrome, но не работают с FF.

Ответы

Ответ 1

Как использовать label? Таким образом, вы получаете функциональность кнопки, но видимость метки. Протестировано в Firefox и Chrome. Обновленный пример отправки формы.

  • Никакой JavaScript не связан с кликабельностью области ячейки.
  • Работает без фиксированной высоты на контейнере
  • Работает, когда другая ячейка имеет большую высоту, чем другая с кнопкой
  • Работает с несколькими ячейками кнопок

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 здесь.

Ответ 2

http://jsfiddle.net/Rhhh7/7/

В этом примере я завернул кнопку в элементе div class= ", как и другие div. Но на этот раз я стилизовал кнопку отдельно, чтобы растянуться до высоты и ширины div.

.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}

EDIT:

Здесь исправить http://jsfiddle.net/Rhhh7/10/

Чтобы решить проблему с Firefox.

Добавьте это в класс "item":

.item {
    border: 3px solid red;
    display: table-cell;
    height:100%;
    vertical-align:top;
}

Чтобы высота td имела высоту 100%, родитель должен иметь высоту 100%. Затем vertical-align:top устанавливает кнопку в верхнюю часть div вместо стандартного, среднего.

Ответ 3

Вы всегда можете просто обернуть кнопку в 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;
}

Итак, я думаю, что в конце дня окончательное решение здесь может быть невозможным кросс-браузер без фиксированной единицы измерения: (

Ответ 4

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

Ответ 5

это работает: 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%;
}

Скриншот Демо

Как выглядит FF:

enter image description here

Ответ 6

Обертка в div - это решение, но я не понимаю, почему вы не можете изменить свойство отображения для элементов кнопки, как и все остальные элементы. Например, вы можете заставить тег ссылки действовать как тег div.

Это предотвращает выполнение таких действий, как изменение порядка отображения кнопок: http://codepen.io/bakers37/pen/emoKvK

В Chrome/Firefox это не работает должным образом.

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; 
}