如何让Bootstrap 4 table在JS中添加数据时不断调整到屏幕宽度

Question

我在 HTML 中指定我的 table 并在 JS 中填充它。

所需的列宽在 <table> 内指定，即 500px。如果我运行代码而不调用 JS 代码，列 headers 是预期的宽度。

但是，一旦我调用 $('#table').bootstrapTable({ ... })，列宽就不再是 500px，而是设置为 headers / 数据中文本的宽度。

如何强制列保持我在 HTML 内指定的宽度？

// Calling this (with or without passing the data in) causes the column widths to reduce to fit the data / headings
$('#table').bootstrapTable({ data: {} })

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/spacelab/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.css">
    
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.js"></script>

<div class="table-responsive">
    <table id="table" class="table table-striped">
        <thead>
            <tr>
                <th data-field="1" style="min-width: 500px;">
                    Heading 1
                </th>
                <th data-field="2" style="min-width: 500px;">
                    Heading 2
                </th>
                <th data-field="3" style="min-width: 500px">
                    Heading 3
                </th>
                <th data-field="4" style="min-width: 500px;">
                    Heading 4
                </th>
                <th data-field="5"  style="min-width: 500px;">
                    Heading 5
                </th>
                <th data-field="6"  style="min-width: 500px;">
                    Heading 6
                </th>
                <th data-field="7" style="min-width: 500px;">
                    Heading 7
                </th>
                <th data-field="8" style="min-width: 500px;">
                    Heading 8
                </th>
                <th data-field="9" style="min-width: 500px;">
                    Heading 9
                </th>
                <th data-field="10" style="min-width: 500px;">
                    Heading 10
                </th>
            </tr>
        </thead>
    </table>
</div>

Answer 1

给你...

$('th').addClass("set-width");
$('#table').bootstrapTable({
  data: {}
});

.set-width {
  min-width: 500px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/spacelab/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.js"></script>

<div class="table-responsive">
  <table id="table" class="table table-striped">
    <thead>
      <tr>
        <th data-field="1">
          Heading 1
        </th>
        <th data-field="2">
          Heading 2
        </th>
        <th data-field="3">
          Heading 3
        </th>
        <th data-field="4">
          Heading 4
        </th>
        <th data-field="5">
          Heading 5
        </th>
        <th data-field="6">
          Heading 6
        </th>
        <th data-field="7">
          Heading 7
        </th>
        <th data-field="8">
          Heading 8
        </th>
        <th data-field="9">
          Heading 9
        </th>
        <th data-field="10">
          Heading 10
        </th>
      </tr>
    </thead>
  </table>
</div>

如何让Bootstrap 4 table在JS中添加数据时不断调整到屏幕宽度

How to make Bootstrap 4 table keeps resizing to screen width when adding data in JS

javascript

bootstrap-table

bootstrap-4