Html 使输入字段看起来像引导程序 3 中的表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25626789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make input fields look like table cells in bootstrap 3
提问by Jamgreen
I have a table in bootstrap 3
我在引导程序 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>
Can I make the input fields look like normal cells? I want the input fields to fill out the entire cells (without no input margin nor table cell padding). Just like an Excel spreadsheet where I have many cells and can write in each of them.
我可以让输入字段看起来像正常的单元格吗？我希望输入字段填写整个单元格（没有输入边距或表格单元格填充）。就像一个 Excel 电子表格，我有很多单元格，可以在每个单元格中书写。
回答by Praveen Kumar Purushothaman
Yup. Do it this way:
是的。这样做：
input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}
Fiddle: http://jsbin.com/biqomurafage/1
小提琴：http: //jsbin.com/biqomurafage/1
回答by JRulle
You could also try using contentEditable tables like this: DEMO
您也可以尝试使用 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;
}
*note, the content editable spans are required for IE to handle the contentEditable attributes correctly. Reference
*注意，IE 需要内容可编辑跨度才能正确处理 contentEditable 属性。参考
