Display: table-cell, не работающая на входном элементе

Я хочу, чтобы часть формы выглядела как электронная таблица. Существует несколько форм, и <table>, таким образом, не является жизнеспособным (хотя я не против этого, когда вы делаете это печать семантически табличных данных, как это имеет место).

Итак, я попытался просто использовать макет CSS2.1 непосредственно с элементами ввода формы, например.

<div class="table">
    <form class="tbody">
        <div class="tr">
            <label class="td">Label</label>
            <input class="td" name />
            <input class="td" name />
        </div>
    </form>
</div>

Полный пример в скрипке.

Но похоже, что display:table-cell не работает с <input> элементами!

Если вы отметите Chrome "Computed Style", дисплей будет "встроенным элементом".

Но я не нашел нигде, почему это не должно:

Любая идея?

Это звучало намного лучше, чем наличие <div class="cell"> вокруг <input>, а затем игра с коробкой, чтобы она выглядела хорошо...

Ответ 1

От W3.org:

"CSS 2.1 не определяет, какие свойства применяются к элементам управления формам и фреймам, или как CSS может использоваться для их стилизации. Пользовательские агенты могут применять свойства CSS к этим элементам. Авторы рекомендуют рассматривать такую поддержку как экспериментальную. уровень CSS может указывать на это далее".

Извините, но элементы display: table-cell on input обрабатываются экспериментально. Попытайтесь избежать этого, используйте, например, элементы-обертки для позиционирования.

Я привел пример с элементами div. Теперь вы можете иметь несколько форм внутри таблицы, однако это работает только тогда, когда элемент form охватывает полные строки. В противном случае ваше гнездование будет разбито.

EDIT: Обновлен скрипт с версией, где border-collapse добавляется, чтобы избежать двойных границ.

Пример JSFiddle