表格宽度不能设置为385像素以下，并且无法响应

Question

I am using Bootstrap and have a part in my code that is:

<table class="table">...</table>

In my header, I have the tag <meta name="viewport" content="width=device-width"> This actually works fine(I can see the whole table on my website) but when I add <meta name="viewport" content="width=device-width initial-scale=1"> like is suggested on many websites, my table doesn't fit the 320 px width viewport that I have been using to test and I have to scroll to see the whole table.

Further investigation and playing around with the css for .table shows that I can't manually set width below 385 px. I have tried searching "bootstrap table 385 px" but it doesn't seem like there is anything special about this number so I am wondering why the table can't be smaller. Does anyone have any ideas as to how I can make the table smaller or make it scale correctly to initial-scale=1?

Edit #1:

<table class="table">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" ng-model="..."> ...
      </td>
      <td>
        <input type="checkbox" ng-model="..."> ...
      </td>
      <td width=70%>
        <input class="form-control" ng-model="...">
      </td>
      <td>
        <button class="btn btn-primary" ng-click="...">...</button>
      </td>
    </tr>
    <tr ng-repeat="... in ...">
      <td class="claimedby-{{...}}">
        <input type="checkbox" ng-model="..." ng-click="...">&nbsp;{{...}}
      </td>
      <td>
        <input type="checkbox" ng-model="..." ng-click="..."> ...
      </td>
      <td>
        <div for="...">
          <div class="...">{{...}}</div>
        </div>
      </td>
      <td>
        <button class="btn btn-danger" ng-click="...">...</button>
      </td>
    </tr>
  </tbody>
</table>

Sorry for the "..." in certain places. I'm not sure if we're allowed to post exact code publicly. Hopefully this is enough to see what's going wrong though.

Answer 1

Here, this should do it for you

    <table class="table">
  <thead>
    <tr>
      <th class="col-md-4 col-xs-2">Col1</th>
      <th class="col-md-4 col-xs-2">Col2</th>
      <th class="col-md-4 col-xs-8">Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" ng-model="..."> ...
      </td>
      <td>
        <input type="checkbox" ng-model="..."> ...
      </td>
      <td>
        <input class="form-control" ng-model="...">
      </td>
      <td>
        <button class="btn btn-primary" ng-click="...">...</button>
      </td>
    </tr>
    <tr ng-repeat="... in ...">
      <td class="claimedby-{{...}}">
        <input type="checkbox" ng-model="..." ng-click="...">&nbsp;{{...}}
      </td>
      <td>
        <input type="checkbox" ng-model="..." ng-click="..."> ...
      </td>
      <td>
        <div for="...">
          <div class="...">{{...}}</div>
        </div>
      </td>
      <td>
        <button class="btn btn-danger" ng-click="...">...</button>
      </td>
    </tr>
  </tbody>
</table>