CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Helping hand
Helping hand

Reputation: 2920

how to make input field fit completely inside bootstrap table <td>

I am using bootstrap 3. I wanted the input field get fit inside my table. Here is my code, I want to do it in table-bordered class of bootstrap. here is the code:

<table class="table table-bordered table-hover">
                         <thead>
                          <tr>
                            <th class="col-md-4">Organization:</th>
                            <th class="col-md-4">City:</th>
                            <th class="col-md-2">From:</th>
                            <th class="col-md-2">To:</th>
                          </tr>
                         </thead>
                         <tbody>
                          <tr ng-repeat="name in getdrugnameNewArray">
                           <td>Stackoverflow</td>
                           <td>2001</td>
                           <td>2009</td>
                          </tr>
                          </tbody>
                          </table>

CSS code : 

td>input {
  margin: 0;
  height: 100% !important;
  display: inline-block;
  width: 100%;
  border-radius: 0 !important;
        }

I need my <td> cell be the input field as such. Any help is appreciated. Thanks.

Upvotes: 9

Views: 29566

Answers (2)

Zaki Mohammed
Zaki Mohammed

Reputation: 1017

@Aziz have proposed very nice solution which actually helped me. This is just my take on the problem and what worked for me.

I have found solution for following 2 cases:

  1. Full width input inside table cell (without margin)
  2. Full width input inside table cell (with margin)

1] Full width input inside table cell (without margin) In case when input required to be stretched out entire cell and there is no margin required for input I have found following solution:

td {
    position: relative;
}

input[type="text"], textarea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    resize: none;

    /* for full width without spacing */
    width: 100%;
    border: none;
}

2] Full width input inside table cell (with margin) In case when input required to be stretched out entire cell and but margin is required for input (as per UI) I have found following solution:

td {
    position: relative;
}

input[type="text"],
textarea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    resize: none;

    /* for column with internal spacing */
    width: 85%;
    padding: 0.3rem;
    margin: 0.2rem 0.5rem;
    border: 1px solid #ddd;
}

In the second case we have to tweak a little with the width part. Have to provide width as needed by design as the other properties are also there with input like its own padding, margin and border. In this case if we keep width: 100% it will take portion of input slightly outside the cell. We have to find the sweet spot for that using width.

I have created solution with and without Bootstrap by commenting out above cases feel free to comment or uncomment to see the difference:

Hope it helps!

Upvotes: 0

Aziz
Aziz

Reputation: 7793

One way to achieve this, is by making the input absolutely positioned so that it bypasses its parents padding/margin (td), of course the parent has to have position: relative;

Demo:

table td {
  position: relative;
}

table td input {
  position: absolute;
  display: block;
  top:0;
  left:0;
  margin: 0;
  height: 100%;
  width: 100%;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th class="col-md-4">Organization:</th>
      <th class="col-md-4">City:</th>
      <th class="col-md-2">From:</th>
      <th class="col-md-2">To:</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="name in getdrugnameNewArray">
      <td>Stackoverflow</td>
      <td>2001</td>
      <td>2009</td>
      <td><input type="text" placeholder="2016"></td>
    </tr>
  </tbody>
</table>

jsFiddle: https://jsfiddle.net/azizn/dp0yLa3d/

Upvotes: 26

Related Questions