why css styles not applied in project

dynamic · April 2017

Hi,
I just started DataTables with scroll horizontal project listed in Examples of DataTables site. The scroll horizontal and even basic cell style is not even displayed. Then I changed from< class="display nowrap"> to <class="display nowrap dataTable no-footer">, I could see some tables are arranged. but where is scroll horizontal option?. I used google chrome. PFA. any suggestions folks

dynamic · April 2017

my basic code:


<!DOCTYPE html>
<html>
<head>
    <title>Tables</title>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>DataTables example - Scroll - vertical</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <style type="text/css" class="init">    
    
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
    
    </style>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script type="text/javascript" 
     src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
    </script>
    
    <script type="text/javascript" class="init">
    
    $(document).ready(function() {
    $('#example').DataTable( {
         "scrollX": true

      });
    });

    </script>

</head>
<body>
  <h4> Table list </h4>
     <table id="myTable" class="display nowrap dataTable no-footer" cellspacing="0" width="100%">
       <thead>
            <tr>
              <th> Name </th>
              <th> Position </th>
              <th>Office</th>
              <th> age </th>
              <th>Start date</th>
              <th>Salary</th>   
              </tr>
       </thead>

       <tbody>
                   <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
       </tbody>     
     </table>

</body>
</html>

kthorngren · April 2017

I'm not sure how this affects the table layout but this:

  div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

This is affecting the scroll bar. If you remove this code or change the number to 400px, for example, you will see the horizontal scroll bar.

Kevin

dynamic · April 2017

Even if I change width: 400px; or remove that part of code,no luck . Still I am not able to see the scroll bar and other CSS styles. Is it something to do with class="display nowrap dataTable no-footer"

kthorngren · April 2017

I'm able to get the scroll bar with dataTable no-footer added:
http://live.datatables.net/humihipe/1/edit

If I remove the CSS code I mentioned above then the scroll bar appears as I resize the window horizontally. If i set the width to 400px then the scroll bar appears right away.

I'm not sure what adding dataTable no-footer provides. They aren't described in the styling section. What are you trying to achieve by using them?

Kevin

allan · May 2017

no-footer is something that DataTables adds automatically itself if the table doesn't have a tfoot element. It should not be added manually.

The reason it isn't initialising the DataTable is that in your Javascript you have:

$('#example')

But in your HTML:

<table id="myTable"

Change the selector in the Javascript to correctly select your table and it will work.

Allan

why css styles not applied in project

why css styles not applied in project

Answers

Howdy, Stranger!

Categories

DataTables

why css styles not applied in project

why css styles not applied in project

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables