表 Td 宽度始终为 100%

【问题标题】：Table Td width always 100%表 Td 宽度始终为 100%
【发布时间】：2019-01-19 09:45:03
【问题描述】：

我想根据 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 列的表格，宽度分别为 50 像素、100 像素和 150 像素。3。我使用 bootstrap4。

【问题讨论】：

标签： html css twitter-bootstrap html-table bootstrap-4

【解决方案1】：

Bootstrap 4 表始终为width:100%。可以使用表上的w-autoutil 类来制作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

【讨论】：