0

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>

誰か助けてください

4

1 に答える 1

1

オーバーフロー プロパティは、テーブル自体ではなく、テーブル コンテナーに適用する必要があります。

スクロールバーが表示されない場合は、テーブルの幅がコンテナーの幅よりも小さいことが原因です。

于 2013-05-31T07:35:47.580 に答える