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