输入文本100％时的边框间距

Question

我有一个表单，其中单元格中的输入文本是100％的单元格。我也折叠了边框并将间距设置为0px。我仍然看到细胞之间的差距，实际上输入。如何消除输入之间的这些差距？我试图松散地模仿电子表格。

守则（https://jsfiddle.net/djyk8927/ ）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要从单元格中删除填充（表格数据） https://jsfiddle.net/djyk8927/5/

td {
    padding: 0px;
}