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

【问题标题】：Bootstrap 4 table with one column larger than othersBootstrap 4 表，其中一列比其他表大
【发布时间】：2018-11-21 07:59:26
【问题描述】：

我创建了一个包含多列的 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>

【问题讨论】：

除了您描述的问题之外，您在<tbody> 内将<td> 与</th> 不匹配
@FabianSchöner。谢谢。我已经在我的文本中修复了这个例子。当我写这个问题时这是一个错字，但是我的这部分代码是正确的。

标签： css bootstrap-4

【解决方案1】：

这样做的正确方法是在桌子上使用 flexbox。更多关于 flexbox 的信息here。

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

希望能解决您的问题！

【讨论】：

感谢弹性盒信息。我现在需要让它更简单，使用

【解决方案2】：

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

【讨论】：

谢谢。它适用于没有 div 的我：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

table {
  table-layout: fixed;
}

【讨论】：