在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电子表格一样，我有很多单元格，可以在每个单元格中编写。

- Jamgreen

Answer 1

好的，按照这种方式操作：

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

Fiddle: http://jsbin.com/biqomurafage/1

- Praveen Kumar Purushothaman

Answer 2

您也可以尝试使用像这样的contentEditable表格：演示

<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属性，需要使用可编辑的span元素。 参考

- JRulle

---

太棒了！我可以补充一下，您可能希望为span设置min-height: 100%，以便在为空时也能够单击。 - Vasspilka

如果您打算将表格作为表单提交，这是否有效？ - paul B

@paul B - 当然可以使用HTML表格单元格作为表单的输入字段。只需为要提交的每个单元格设置“id”和“name”，并根据您的表单需求进行处理即可。这也是我的需求。 - Robert