Horizontal scroll in jQuery DataTables

Question

I have a template which provides functionality of jQuery DataTables. But I am not able to scroll the table horizontally. When I add columns they just don't come in view

Below is the HTML code

    <h3>Trainer Deletion</h3>
    <div class="table-responsive">
        <table id="example-datatable" class=" table-condensed table-bordered">
            <thead>
                <tr>
                                <th></th>
                                <th>Trainer ID</th>
                                <th>Name</th>
                                <th>Gender</th>
                                <th>Age</th>
                                <th>Description</th>
                                <th>Primary Mobile Number</th>
                                <th>Secondary Number</th>
                                <th>Base City</th>
                                <th>Base Location</th>
                                <th>Work Location</th>
                                <th>Education</th>
                                <th>Trainer Since</th>
                                <th>ID Proof</th>
                                <th>Certificates</th>
                                <th>Email</th>
                                <th>Email Verify</th>
                                <th>Not Available on</th>
                                <th>Style</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    include("db.php");
                                $sql="select * from trainer";
                                $result=mysqli_query($conn, $sql);                      
                ?>
                <?php while($row=mysqli_fetch_array($result)) { ?>
                <tr>
                    <td class="text-center"><?php echo"<input type='checkbox' name=id[] value='$row[trainer_id]'>"; ?></td>
                    <td class="text-center"><?php echo"$row[trainer_id]";?></td>
                    <td class="text-center"><?php echo"$row[Name]";?></td>
                    <td class="text-center"><?php echo">$row[Gender]";?></td>
                    <td class="text-center"><?php echo"$row[Age]";?></td>
                    <td class="text-center"><?php echo"$row[Description]";?></td>
                    <td class="text-center"><?php echo"$row[Primary_mobile_number]";?></td>
                    <td class="text-center"><?php echo"$row[Secondary_number]";?></td>
                    <td class="text-center"><?php echo"$row[Base_city]";?></td>
                    <td class="text-center"><?php echo"$row[Base_Location]";?></td>
                    <td class="text-center"><?php echo"$row[Work_location]";?></td>
                    <td class="text-center"><?php echo"$row[Education]";?></td>
                    <td class="text-center"><?php echo"$row[Trainer_since]";?></td>
                    <td class="text-center"><?php echo"$row[Id_proof]";?></td>
                    <td class="text-center"><?php echo"$row[Certificates]";?></td>
                    <td class="text-center"><?php echo"$row[email]";?></td>
                    <td class="text-center"><?php echo"$row[email_verify]";?></td>
                    <td class="text-center"><?php echo"$row[not_available_on]";?></td>
                    <td class="text-center"><?php echo"$row[Style]";?></td>
                </tr>
                <?php } ?>
            </tbody>
        </table>
    </div>

Below is the screen shot

enter image description here

Darren Willows · Accepted Answer · 2015-07-17 08:11:36Z

3

If you add:

style="overflow-x:auto;"

to

<div style="overflow-x:auto;" class="table-responsive">

That show allow you to scroll when it overlap the container.

edited Jul 17, 2015 at 8:11

answered Jul 17, 2015 at 8:02

Darren Willows

2,15615 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Horizontal scroll in jQuery DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related