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>

但是样式属性被完全忽略，我可以水平滚动表格，但选项列不会改变大小。

Answer 1

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

table {
  table-layout: fixed;
}

但是，如果要保持响应性，则应该将宽度设置为百分比值，或者更好地使用引导列，以便可以在各种屏幕尺寸上指定宽度。