I use bootstrap 4. I have a trace. table:

<table class="table table-hover table-sm"> <thead> <tr> <th>Дата</th> <th>Остаток</th> <th>Выкуп зол.</th> <th>%</th> <th>Из офиса</th> <th>Залог зол.</th> <th>Скупка</th> <th>Остаток</th> <th>Офис</th> <th>Люди</th> <th>Новые</th> <th>Вес</th> <th></th> </tr> </thead> <tbody> <form> <tr class="align-val-center"> <td><input class="form-control" type="text" value="21.03.2018"/></td> <td>0</td> <td>27050</td> <td>11077</td> <td>0</td> <td>36850</td> <td>21080</td> <td>20197</td> <td>0</td> <td>8</td> <td>15.62</td> <td align="center"> <div class="btn btn-secondary" style="font-size:13px" role="button"><i class="far fa-pencil-alt"></i></div> </td> </tr> </form> </tbody> </table>

It looks like this if there is no td input inside:

Table without input

I need to add an input to each cell. As soon as I do this the column expands.

Table with input

Question: How to make it so that the table retains its size as in screenshot 1, but at the same time, the input expanded to 100% the length of the parent.

I tried to use styles like:

 td input.form-control width: 100% !important box-sizing: border-box !important

But it does not work. Help please solve the issue

  • Here is a link to CodePen, the same story: codepen.io/WhoIsDT/pen/rdyoRQ - WhoIsDT
  • There is a crutch: you need to set min-width and max-width for input, for example 120px - noname228
  • Yes, that’s already decided ... - WhoIsDT
  • In JavaScript, get the current width and add it to the input as fixed. - Dmitry Polyanin
  • @ DmitryPolyanin, won't such manipulations on the client side lead to interface twitching? - yolosora

1 answer 1

You can use this crutch

<input class="form-control" size="1" type="text" value="21.03.2018"/>

  • Good option, thanks - WhoIsDT