css - Alpha 表列固定宽度被忽略

Question

我想为我的响应式 bootstrap 4 表设置一个固定的列宽，但似乎 css 完全忽略了我具有固定列宽的样式。

<table class="table table-responsive table-sm table-striped table-hover">
  <thead>
     <tr>
       <th>
          <input type="checkbox"/>
        </th>
        <th style="width: 150px;">Options</th>
        .. some more columns!
      </tr>
  </thead>
  <tbody>
    <tr>
    <td><input type="checkbox" /> </td>
    <td style="width: 150px;"> some text </td>
     .. some more columns!
   </tr>
  </tbody>
</table>

但是 style 属性完全被忽略了，我可以水平滚动表格，但是 Options 列没有改变大小。

Answer 1

如果你想使用固定宽度，你可以这样设置你的 css:

table {
  table-layout: fixed;
}

但是，如果您想保持响应能力，您可能应该将宽度设置为百分比值，或者更好的是使用引导列，这样您就可以在各种屏幕尺寸上指定宽度。