Question

我正在使用jQuery表来显示我的数据。我有前面和后面的2个按钮用于分页。但是我想在表格的底部添加一个滚动条。我写了

overflow:scroll

在CSS中

，但它没有用。

这是我的代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Query Result Page</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
    <link href="css/jdpicker.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>        
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
</head>
<body>   
    //this is the jQuery function for table //                
    <script type="text/javascript">
    $(document).ready(function() {
        $('#tableData').dataTable();
    } );
    </script>

    // these are the CSS classes that will create the table look and feel 
    <table class="tableData context-menu-one" id="tableData" style="overflow-x: scroll ">
        <thead>    // this is column for tables which will contain the values from the database //
            <tr style="font-size: 14px;" >
                <th width="20%" align="left">Name</th>
                <th width="20%" align="left">Class</th>
                <th width="20%" align="left">Roll</th>
                <th width="20%" align="left">Address</th>
                <th width="20%" align="left">Marks</th>
            </tr>
        </thead>    
        // this is table values here we  will list some values dynamically which will come from database
        <tr style="font-size: 14px;" >
            <th width="20%" align="left">john</th>
            <th width="20%" align="left">9</th>
            <th width="20%" align="left">47</th>
            <th width="20%" align="left">mumbai</th>
            <th width="20%" align="left">52</th>
        </tr>
        <tbody>
        <tbody>
        </tbody>
    </table> 
</body>
</html>

有人请帮帮我

Answer 1

必须在表容器上应用overflow属性，而不是表本身。

如果没有出现滚动条，那是因为表格宽度小于容器宽度。

如何在表格中添加滚动条

1 个答案: