【问题标题】:border spacing when input text 100% [duplicate]输入文本时的边框间距 100% [重复]
【发布时间】:2017-03-26 20:44:10
【问题描述】:

我有一个表单,其中输入文本的单元格占单元格的 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>

【问题讨论】:

  • 修改 JSFiddle - jsfiddle.net/djyk8927/1
  • 元素有一些与之相关的默认样式。所以你需要覆盖它们。在这种情况下,它的填充与 td 相关联。将其重置为 0 应该可以解决。
  • 这就是你想要得到的? jsfiddle.net/djyk8927/6

标签: html css html-table css-tables


【解决方案1】:

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

td {
    padding: 0px;
}

【讨论】:

  • 完美。有什么想法如何删除双边框?
  • 要么使用 jQuery 为每个输入元素分配边框,要么删除输入元素边框并使用表格边框。
  • jsfiddle.net/djyk8927/8 这是一个使用表格边框代替输入边框的示例。
  • 太棒了。正是我想要做的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-03-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多