Styling of the datatable

SBD999

Hi, actually I used the class below for the styling of the datatable

class = "table table-striped table-bordered dt-responsive nowrap"

When I changed the class e.g class="hover" is not take into account and I no more style in my datatable.
Have you some advise?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SBD999

Hi,
I use the datatable in html as below

<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />

<div class="col-md-10">
          <div style="width:90%; margin:0 auto;">
                <table id="wvieWerDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" >
                    <thead>
                        <tr>     
                        <th>Name</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Created</th>                    
                        </tr>
                    </thead>
                      <tbody>               
                     </tbody>
                </table>
          </div>
     </div>

In section script I've put

<script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
 <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>

When I change the class = "hover" the result is not good

am I using the wrong library?

allan

The code there looks okay, so as Colin said, we'd need a link to a page showing the issue to be able to help debug it. Perhaps you haven't loaded Bootstrap 4? This example shows it working correctly.

Allan

SBD999

hi,

I've made the test case here : live.datatables.net/kihefame/1/edit

kthorngren

The first problem is your test case doesn't run because you haven't loaded all the correct JS and CSS files like jquery.js nd your paths are pointing to local resources on your system. In the future please make sure to use the correct JS and CSS includes. I used the download builder to fix the problem.

Since you are using Bootstrap4 you need to look at the BS4 styling options. You need to use table-hover as shown in the BS4 docs. Your updated example:
http://live.datatables.net/kihefame/2/edit

Kevin

SBD999

thank you very much! it's OK