jquery - 数据表不滚动

Question

我试图让我的数据表水平滚动，这样如果使用移动设备或小屏幕，就可以看到表中的所有信息。目前它只显示它能显示的内容，然后隐藏其他内容。

我试过一些 css/jquery 来尝试解决这个问题，但仍然没有在 table 上滚动。

表格 html:

<div class="module-body">
                        <div class="module">
                            <div class="module-head">
                                <h3>Entries</h3>
                            </div>
                            <div class="module-body table">
                                <table cellpadding="0" cellspacing="0" border="0" class="datatable-1 table table-bordered table-striped display" width="100%" id="members">
                                    <thead>
                                        <tr>
                                            <th>Date Entered</th>
                                            <th>Driver</th>
                                            <th>Member No</th>
                                            <th>Class</th>
                                            <th>Age</th>
                                            <th>Lady</th>
                                            <th>Navigator</th>
                                            <th>Member No</th>
                                            <th>Class</th>
                                            <th>Age</th>
                                            <th>Lady</th>
                                            <th>Make / Model</th>
                                            <th>Registration</th>
                                            <th>Running Class</th>

                                            <th></th>
                                        </tr>
                                    </thead>
                                     <?php
//MySqli Select Query
$results = $mysqli->query("SELECT *, DATE_FORMAT(date,'%d/%m/%Y %h %m') AS niceDate  FROM entries WHERE sevent='$id'");



//set counter
while($row = $results->fetch_assoc()) {
            $compid = $row["id"];





  echo'
                                         <tr>
                                         <td><span class="hide">'.$row["date"].'</span>'.$row["niceDate"].'</td>     
                                         <td>'.$row["dname"].'</td>
                                          <td>'.$row["dmno"].'</td>
                                           <td>'.$row["dclass"].'</td>
                                            <td>'.$row["dage"].'</td>
                                          <td>'.$row["dlady"].'</td>
                                          <td>'.$row["nname"].'</td>
                                          <td>'.$row["nmno"].'</td>
                                           <td>'.$row["nclass"].'</td>
                                            <td>'.$row["nage"].'</td>
                                          <td>'.$row["nlady"].'</td>
                                          <td>'.$row["make"].' '.$row["model"].'</td>
                                            <td>'.$row["reg"].'</td>
                                          <td>'.$row["nclass"].'</td>




                                             <td align="center" valign="middle"><a href="editcomp.php?id='.$compid.'">Edit Competitor</a></td>
                                             </tr>
                                             ';




}  


?> 
                                </table>
                            </div>
                            </div>
                            </div>
                            </div>

我试过放置 overflow: auto;

我试过了

$(document).ready(function() {
    $('#members').DataTable( {
        "scrollX": true
    } );
} );

为什么上面的任何一个表格都不能水平滚动。我怎样才能让它滚动？

Answer 1

尝试这样做

div class="module-body table"style="overflow-x: scroll;overflow-y: hidden;">