html - jQuery DataTables 中的水平滚动

Question

我有一个提供 jQuery DataTables 功能的模板。但我无法水平滚动表格。当我添加列时，它们就不会出现在 View 中

下面是HTML代码

    <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>

下面是截图

Answer 1

如果你添加:

style="overflow-x:auto;"

到

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

当它与容器重叠时，该显示允许您滚动。