Question

我创建了一个包含多列的Bootstra4表。其中一个需要比其他更大，以适应更多的文本。我想设置较大列的最小宽度，让Bootstrap4计算出其他列的大小。我一直在尝试不同的东西，但我找不到设置所需列宽度的方法。感谢任何提示。感谢。

让我们假设第11列应该更大。

<script  type="text/javascript">
  $(document).ready(function() {
    $('#mytable').DataTable(
      {
        "lengthMenu": [ [10, 20, 30, -1], [10, 20, 30, "All"] ]
      }
    );
  } );
</script>

<table id="mytable" class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>column 1, default size</th>
      <th>column 2, default size</th>
      <th>column 3, default size</th>
      <th>column 4, default size</th>
      <th>column 5, default size</th>
      <th>column 6, default size</th>
      <th>column 7, default size</th>
      <th>column 8, default size</th>
      <th>column 9, default size</th>
      <th>column 10, default size</th>
      <th>column 11, 15% size/th>
      <th>column 12, default size</th>
      <th>column 13, default size</th>
      <th>column 14, default size</th>
      <th>column 15, default size</th>
      <th>column 16, default size</th>
      <th>column 17, default size</th>
      <th>column 18, default size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column 1, default size</td>
      <td>column 2, default size</td>
      <td>column 3, default size</td>
      <td>column 4, default size</td>
      <td>column 5, default size</td>
      <td>column 6, default size</td>
      <td>column 7, default size</td>
      <td>column 8, default size</td>
      <td>column 9, default size</td>
      <td>column 10, default size</td>
      <td>column 11, 15% size</td>
      <td>column 12, default size</td>
      <td>column 13, default size</td>
      <td>column 14, default size</td>
      <td>column 15, default size</td>
      <td>column 16, default size</td>
      <td>column 17, default size</td>
      <td>column 18, default size</td>
    </tr>
  </tbody>
</table>

Answer 1

正确的方法是在桌面上使用flexbox。有关flexbox here的更多信息。

您还可以在表格列上使用col-x为x = 1,2,3 ...，12（列宽）。有关这种方式的更多信息here

希望能解决你的问题！

Answer 2

在第11个div单元格中使用th并设置其最小宽度。

Answer 3

我在Set min-width in HTML table's <td>中找到了适用于我的案例的解决方案：

<td style="min-width:100px">

Answer 4

如果人们仍在寻找解决方案。这对我有用

table {
  table-layout: fixed;
}

Bootstrap 4表，其中一列比其他列大

4 个答案: