23

フォームの一部をスプレッドシートのように見せたい。いくつかの形式があり、<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の「ComputedStyle」をチェックインすると、表示は「inline-element」になります。

しかし、なぜそうすべきでないのか、どこにも見つかりませんでした。

何か案が？

<div class="cell">周りにいくつか持っていて<input>、それを美しく見せるためにボックスモデルで遊んでいなければならないよりもはるかに良い音でした...

4

1 に答える 1

16

W3.orgから：

「CSS2.1は、フォームコントロールとフレームに適用されるプロパティ、またはCSSを使用してそれらのスタイルを設定する方法を定義していません。ユーザーエージェントはこれらの要素にCSSプロパティを適用できます。作成者はこのようなサポートを実験的なものとして扱うことをお勧めします。CSSの将来のレベルこれをさらに指定するかもしれません。」

申し訳ありませんがdisplay: table-cell、input要素は実験的に扱われます。それを避けるようにしてください。たとえば、配置にはラッパー要素を使用します。

div要素を使って例を作成しました。これで、テーブル内に複数のフォームを含めることができますが、form要素が全行にまたがる場合にのみ機能します。そうしないと、ネストが壊れます。

編集：border-collapse二重の境界線を避けるために追加され たバージョンでフィドルを更新しました。

JSFiddleの例

于 2013-03-26T08:11:42.317 に答える