1

I am trying to resize the input/td fields for a table, but cannot seem to get it working. Ive been referencing the stack post below. Still no luck.

stack-post-ref

jsfiddle-for-table

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>XS</th>
        <th>S</th>
        <th>M</th>
        <th>L</th>
        <th>XL</th>
        <th>XXL</th>
        <th>XXXL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-md-1"><input type="number" name="xs" ng-model="order.size.extra_small"></td>
        <td class="col-md-1"><input type="number" name="s" ng-model="order.size.small"></td>
        <td class="col-md-1"><input type="number" name="m" ng-model="order.size.medium"></td>
        <td class="col-md-1"><input type="number" name="l" ng-model="order.size.large"></td>
        <td class="col-md-1"><input type="number" name="xl" ng-model="order.size.extra_large"></td>
        <td class="col-md-1"><input type="number" name="xxl" ng-model="order.size.double_extra_large"></td>
        <td class="col-md-1"><input type="number" name="xxxl" ng-model="order.size.triple_extra_large"></td>
      </tr>
    </tbody>
  </table>
</div>
Community
  • 1
  • 1
Seal
  • 1,060
  • 1
  • 12
  • 31
  • Why try to make a table and use column styling from bootstrap, it seems redundant? Either break it out into columns to adjust the size with the col-xx-# selectors or, as the answers below suggest, style the table yourself – Brad Miller Feb 25 '16 at 17:20

2 Answers2

1

add form-control class to your input field https://jsfiddle.net/NourSammour/u2c09yb5/1/

Nour Sammour
  • 2,822
  • 1
  • 20
  • 19
0

For me this works:

<div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><input type... /></td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td>cursus</td>
                  <td>ante</td>
                </tr>
                <tr>
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td>Sed</td>
                  <td>nisi</td>
                </tr>
              </tbody>
            </table>
          </div>