fill input into height and width of Bootstrap table cell

Issue

I have a table (using Bootstrap 3.0) with an input field in each cell

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table id="itemTable" border="1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th >Quantity</th>
                                <th>Unit</th>
                                <th>Material Name</th>
                                <th>PO Vatable</th>
                                <th>PO TAX</th>
                                <th>PO Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="number" min="1" class="form-control" name="Quan[]">
                                </td>
                                <td>
                                    <select id="BX_gender" name="Unit[]">
                                        <option>Kg</option>
                                        <option>Piece</option>
                                        <option>Meter</option>
                                        <option>Pound</option>
                                        <option>Gram</option>
                                        <option>Feet</option>
                                    </select>
                                </td>
                                <td><input type="text" name="Material[]"> </td>
                                <td><input type="number" step="0.01" class="small" name="POVATABLE[]"> </td>
                                <td><input type="number" step="0.01" class="small" name="POTAX[]"> </td>
                                <td><input type="number" step="0.01" class="small" name="POTOTAL[]" onkeyup="onRequestTotalModification(this.parentNode.parentNode.rowIndex)"> </td>
                            </tr>
                        </tbody>
                    </table>

I'm trying to set the input to have the width & height of the cell containing it, but nothing is working (even inline styling). I organized the table using thead and tbody tags, but it didn't fix anything

Solution

If you're trying to have your input be the entire cell you need to remove bootstraps default padding on TD elements.

https://jsfiddle.net/2ay5yuq3/2/

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
  padding: 0;
}

Answered By - AJak