CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapdatatables
techhighlands
techhighlands

Reputation: 972

Fit datatables to screen

I want to fit this datatable to the screen, 100% width. I tried setting the width property to 100% on the <div> and <table> but still it exceeds the screen length.

I am using Bootstrap styling for the css part. My goal is to fit the datatable inside the container well.

The HTML:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome" />
    <title>GRM Logistics App</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="temp.js"></script>

</head>


<div class="container well">
    <table id="example" class="display" 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>
                    <th>EX1</th>
                    <th>EX2</th>
                    <th>EX3</th>
                    <th>EX4</th>
                    <th>EX5</th>
                    <th>EX6</th>
                    <th>EX7</th>
                    <th>EX8</th>
                    <th>EX9</th>
                    <th>EX10</th>
                    <th>EX11</th>
                    <th>EX12</th>
                    <th>EX13</th>
                    <th>EX14</th>
                    <th>EX15</th>
                    <th>EX16</th>
                    <th>EX17</th>
                    <th>EX18</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>
                    <td>Sample 1</td>
                    <td>Sample 2</td>
                    <td>Sample 3</td>
                    <td>Sample 4</td>
                    <td>Sample 5</td>
                    <td>Sample 6</td>
                    <td>Sample 7</td>
                    <td>Sample 8</td>
                    <td>Sample 9</td>
                    <td>Sample 10</td>
                    <td>Sample 11</td>
                    <td>Sample 12</td>
                    <td>Sample 13</td>
                    <td>Sample 14</td>
                    <td>Sample 15</td>
                    <td>Sample 16</td>
                    <td>Sample 17</td>
                    <td>Sample 18</td>
                </tr>
            </tbody>
        </table>
    </div>

The JS:

$(document).ready(function() {
    $('#example').DataTable();
} );

Update: If I set the <table> element css to the followings, the table fits in the container well with a horizental scroll bar. Still it would be great if there is a way to fit the table without a scroll bar.

table{
width:100%;
overflow-x:auto;
display:block;
}

Upvotes: 4

Views: 7748

Answers (1)

Sreemat
Sreemat

Reputation: 626

Try this

This is a responsive dataTable combination of jQuery and Bootstrap.

I have changed some scripts.

Added Class table table-bordered dt-responsive to table

<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome" />
    <title>GRM Logistics App</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js" type="text/javascript"></script>-->

</head>
<script>
    $(document).ready(function() {
        $('#example').dataTable();
    });
</script>

<div class="container well">
    <table id="example" class="table table-bordered dt-responsive" 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>
                <th>EX1</th>
                <th>EX2</th>
                <th>EX3</th>
                <th>EX4</th>
                <th>EX5</th>
                <th>EX6</th>
                <th>EX7</th>
                <th>EX8</th>
                <th>EX9</th>
                <th>EX10</th>
                <th>EX11</th>
                <th>EX12</th>
                <th>EX13</th>
                <th>EX14</th>
                <th>EX15</th>
                <th>EX16</th>
                <th>EX17</th>
                <th>EX18</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>
                <td>Sample 1</td>
                <td>Sample 2</td>
                <td>Sample 3</td>
                <td>Sample 4</td>
                <td>Sample 5</td>
                <td>Sample 6</td>
                <td>Sample 7</td>
                <td>Sample 8</td>
                <td>Sample 9</td>
                <td>Sample 10</td>
                <td>Sample 11</td>
                <td>Sample 12</td>
                <td>Sample 13</td>
                <td>Sample 14</td>
                <td>Sample 15</td>
                <td>Sample 16</td>
                <td>Sample 17</td>
                <td>Sample 18</td>
            </tr>
        </tbody>
    </table>
</div>

</html>

Upvotes: 1

Related Questions