Data-URL option on Bootstrap Table adding borders

user_13788198 0
Viewed 272

On my page, I have two tables made with Bootstrap Table. One of them I've manually input data into the rows and columns and the other populates with data-toggle="table" data-url="working-url.php". They both have the class table-borderless, but when the table with the data-url is generated, the class table-bordered seems to be added automatically. The other table has no borders, as expected.

Is there a way to change this behavior?

EDIT: This is my source code:

<table data-toggle="table"
  data-url="working-url.php"
  class="table table-borderless table-striped">
  <thead>
    <tr>
      <th scope="col-2" data-field="statistic">Statistic</th>
      <th scope="col-2" data-field="value">Value of Stat</th>
    </tr>
  </thead>
</table>

But when I load the page and then inspect element, I get this:

<table data-toggle="table" 
  data-url="working-url.php" 
  class="table table-borderless table-striped table-bordered table-hover"> 
  ...
</table>
bootstrap-table css html javascript
1 Answers

Her is an efficient way to removeClass() from your data which is getting added via bootstrap 4.

You can either use JS or jQuery for it.

Just run snippet below to see it action. You can add the following JS or jQuery code to your table to removeClass manually which you do not want.

Also, I have added an ID to you table called my_table this is to make sure that we are only removing class table-bordered from one table and not every table on you page - if any

//jQuery//
$('#my_table').removeClass('table-bordered')

//Javascript Version//
var element = document.getElementById("my_table");
element.classList.remove("table-bordered");
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<table data-toggle="table" data-url="working-url.php" class="table table-borderless table-striped table-bordered table-hover" id="my_table">
  <thead>
    <tr>
      <th scope="col-2" data-field="statistic">Statistic</th>
      <th scope="col-2" data-field="value">Value of Stat</th>
    </tr>
  </thead>
</table>

Hope this helps.

user_136690480
Related