This question already has answers here:
How to remove unwanted space between rows and columns in table?
(13个回答)
3年前关闭。
我有一个表单,该表单在单元格的100%中具有输入文本。我还折叠了边框并将间距设置为0px。我仍然看到单元格之间的差距,实际上是输入。如何消除输入之间的这些间隙?我正在尝试大致模拟电子表格。
代码(https://jsfiddle.net/djyk8927/
):
(13个回答)
3年前关闭。
我有一个表单,该表单在单元格的100%中具有输入文本。我还折叠了边框并将间距设置为0px。我仍然看到单元格之间的差距,实际上是输入。如何消除输入之间的这些间隙?我正在尝试大致模拟电子表格。
代码(https://jsfiddle.net/djyk8927/
):
#requestorTable{
border-collapse:collapse;
border-spacing:0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
border:1px solid #919295;
}
<table id='requestorTable'>
<tr>
<td>
<input type='text' id='item1' name='item1'>
</td>
<td>
<input type='text' id='qty1' name='qty1'>
</td>
<td>
<input type='text' id='price1' name='price1'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item2' name='item2'>
</td>
<td>
<input type='text' id='qty2' name='qty2'>
</td>
<td>
<input type='text' id='price2' name='price2'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item3' name='item3'>
</td>
<td>
<input type='text' id='qty3' name='qty3'>
</td>
<td>
<input type='text' id='price3' name='price3'>
</td>
</tr>
</table>
最佳答案
您需要从单元格中删除填充(表格数据)
https://jsfiddle.net/djyk8927/5/
td {
padding: 0px;
}