Styling of the datatable

Styling of the datatable

SBD999SBD999 Posts: 36Questions: 1Answers: 0

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?

Replies

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    hi,

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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • SBD999SBD999 Posts: 36Questions: 1Answers: 0

    thank you very much! it's OK

Sign In or Register to comment.