html - 表格 Td 宽度始终为 100%

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