web-dev-qa-db-ja.com

入力フィールドをbootstrap 3のテーブルセルのように見せます

bootstrap 3にテーブルがあります

<table class="table table-bordered table-condensed">
    <tbody>
        <tr>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
        </tr>
    </tbody>
</table>

入力フィールドを通常のセルのように見せることはできますか？入力フィールドにセル全体を入力するようにします（入力マージンやテーブルセルのパディングなし）。多くのセルがあり、それぞれに書き込むことができるExcelスプレッドシートのように。

htmlcsstwitter-bootstraptwitter-bootstrap-3html-table
19
Jamgreen

うん。このようにします：

input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}

フィドル： http://jsbin.com/biqomurafage/1

17
Praveen Kumar Purushothaman

次のようなcontentEditableテーブルを使用することもできます：[〜＃〜] demo [〜＃〜]

<table>
    <tbody>
        <tr>
            <th></th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <th>1</th>
            <td><span id="A1" contenteditable>#####</span></td>
            <td><span id="B1" contenteditable></span></td>
            <td><span id="C1" contenteditable></span></td>
        </tr>
        <tr>
            <th>2</th>
            <td><span id="A2" contenteditable></span></td>
            <td><span id="B2" contenteditable></span></td>
            <td><span id="C2" contenteditable></span></td>
        </tr>
    </tbody>
</table>

span {
    width: 100%;
    display: block;
}

*注意、contentEditableの属性は、IEがcontentEditable属性を正しく処理するために必要です。 Reference

11
JRulle