How to remove padding from Bootstrap data table

paultechguy

I am using the Bootstrap enabled data table and want to remove the left/right padding. The DataTables.net JavaScript inserts a DIV above my data table like:

<div id="reports_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">

The container-fluid class is what has the padding, but I don't want to override this as it is a standard Bootstrap class. Given the "id" can be different from data table to data table, what would be the best way to override this given the dynamic way the DIV is inserted into the DOM?

Thanks.

paultechguy

I was able to solve this by wrapping my table element with another DIV that had a class like "datatable-wide" and then created a class like:

<div class="datatable-wide">
    <table ...>
    </table>
</div>

div.datatable-wide {
    padding-left: 0;
    padding-right: 0;
}