Html 使输入字段看起来像引导程序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电子表格一样，我有许多单元格，可以在每个单元格中进行书写。

是的。这样做：

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

---

Fiddle:您也可以尝试使用如下内容可编辑表：

<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;
}

A.
B
C
1.
#####
2.
跨度{
宽度：100%；
显示：块；
}

---

*注意，IE需要内容可编辑范围才能正确处理contentEditable属性

真棒的回答！请允许我补充一点，您可能希望将

最小高度：100%

作为跨度，以便能够在清空时单击。如果您打算将表格作为表单提交，则执行此操作？@paul B-确保您可以使用html表格单元格作为表单的输入字段。只需为每个要提交的单元格设置

id

和

名称

，并根据表单需要进行处理。这也是我的需要。