Question

我想基于TH为整个列指定宽度。如您所见：

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th style="width: 50px">TEST 50</th>
      <th style="width: 100px">TEST 100</th>
      <th style="width: 150px">TEST 150</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class"form-control" typ="text"></td>
      <td><input class"form-control" typ="text"></td>
      <td><input class"form-control" typ="text"></td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/aq9Laaew/148760/

总获得100％。

我怎么有一张3列的表，它们的宽度分别为50px，100px和150px。3。我使用bootstrap4。

Answer 1

Bootstrap 4表始终为width:100%。您可以在表上使用w-auto util类，使其成为width:auto;

确保HTML的结构正确。

<table class="table table-hover table-bordered w-auto">
      <thead>
        <tr>
          <th style="width:50px">TEST 50</th>
          <th style="width:100px">TEST 100</th>
          <th style="width:150px">TEST 150</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" type="text"></td>
          <td><input class="form-control" type="text"></td>
          <td><input class="form-control" type="text"></td>
        </tr>
      </tbody>
</table>

演示：https://www.codeply.com/go/ONEQJYeJPN

相关：bootstrap 4 table column sizing

表Td宽度始终为100％

1 个答案: