在JS中添加数据时如何使Bootstrap 4表格不断调整屏幕宽度

Question

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

The desired column widths are as specified within <table> ie 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/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

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/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>