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

I am specifying my table in HTML and populating it within JS.

The desired column widths are as specified within <table> i.e. 500px. If I run the code without calling the JS code, the column headers are the expected widths.

However, once I call $('#table').bootstrapTable({ ... }) the column widths are no longer at 500px but instead set to the width of the text in the headers / data.

How do I force the columns to stay the widths that I have specified within 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/[email protected]/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/[email protected]/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>

Solution 1:^[1]

Here you go...

$('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/[email protected]/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/[email protected]/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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Cervus camelopardalis

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]