html - 表格宽度不能设置为 385 像素以下和响应问题

Question

我正在使用 Bootstrap 并且在我的代码中有一部分是:

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

在我的标题中，我有标签 <meta name="viewport" content="width=device-width">这实际上工作正常(我可以在我的网站上看到整个表格)但是当我添加 <meta name="viewport" content="width=device-width initial-scale=1">就像许多网站上建议的那样，我的表格不适合我一直用来测试的 320 像素宽度视口(viewport)，我必须滚动才能看到整个表格。

进一步调查和使用 .table 的 css 表明我无法手动将宽度设置为 385 像素以下。我试过搜索“bootstrap table 385 px”，但这个数字似乎没有什么特别之处，所以我想知道为什么表格不能更小。有没有人对如何缩小表格或使其正确缩放到 initial-scale=1 有任何想法？

编辑#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>

对某些地方的“...”感到抱歉。我不确定我们是否可以公开发布确切的代码。希望这足以看出出了什么问题。

Answer 1

在这里，这应该为你做

    <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>