border spacing when input text 100%

Question

I have a form that has input text in cells that are 100% of the cell. I have also collapsed borders and set spacing to 0px. I still see a gap between cells, well actually inputs. How can I remove these gaps between inputs? I'm trying to loosely mimic a spreadsheet.

The Code (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>

elements have some default style associated with them. so you need to override them. in this case its padding thats associated with td. resetting it to 0 should fix. — Sreekanth, Nov 12 '16 at 21:50
This is what you were trying to get? https://jsfiddle.net/djyk8927/6/ — P.S., Nov 12 '16 at 21:59

Kieran Devlin · Accepted Answer · 2022-12-06T15:32:24.690

1

You need to remove the padding from the cells (table data )

td {
    padding: 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{
  border-collapse:collapse;
  border-spacing:0px;
}

td {
  padding: 0px;
}

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

edited Dec 06 '22 at 15:32

answered Nov 12 '16 at 21:48

Kieran Devlin

1,373
1
12
28

perfect. any thoughts how to remove the double border? – bart2puck Nov 12 '16 at 21:49
Either use jQuery to assign borders relative to each input element or remove the input elements borders and use the tables borders. – Kieran Devlin Nov 12 '16 at 21:53
https://jsfiddle.net/djyk8927/8/ Here's an example of using the table borders instead of the input borders. – Kieran Devlin Nov 12 '16 at 21:58
brilliant. exactly what i am trying to do. – bart2puck Nov 12 '16 at 21:59

border spacing when input text 100%

1 Answers1