使输入字段看起来像bootstrap 3中的表格单元格

Question

我在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电子表格,我有很多单元格,可以在每个单元格中写入.

Answer 1

对.这样做:

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

小提琴:http://jsbin.com/biqomurafage/1

Answer 2

您也可以尝试使用这样的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;
}

*请注意,IE需要内容可编辑的跨度才能正确处理contentEditable属性.参考