如何创建可滚动表?

时间:2014-09-04 10:06:38

标签: html css

您好我正在尝试创建应该可以使用php滚动的表,我能够实现 当我给行偶数和奇数颜色它变得不可滚动我应该怎么做,当我添加偶数和奇数类名称它不应该变得不可滚动

这是我的代码

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery.js"></script>
<style type="text/css">
.wrap {
    width: 320px;

}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 150px;
    overflow-y: auto;
}</style
</head>
<?php
include('conn.php');
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT * FROM mesagerecord';


$retval = mysql_query( $sql, $conn );
if(! $retval )
{
  die('Could not get data: ' . mysql_error());
}
?>
<div class="wrap">
    <table class="head">
        <tr>
            <td>Message</td>
            </tr>
    </table>
     <div class="inner_table">
    <table>

<?php
$i=0;
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
    if($i%2==0)
$classname="evenRow";
else
$classname="oddRow";
?>
       <tr>
            <td class="<?php echo $classname;?>"><?php  echo $row['message']; ?></td>

    </tr>
  <?php
$i++;}
?>
 </table>
    </div>
    </div>
<?php 
mysql_close($conn);
?>

如果我删除奇怪的类名,它就可以正常工作。

1 个答案:

答案 0 :(得分:0)

你必须使用tbody并且溢出将自动显示为阻止。

你能查一下吗?

示例:

的CSS

    <style>
    tbody {
        height: 100px;
        overflow: auto;
        display:block;
    }
    </style>

HTML

    <table border="1">
        <thead>
            <tr>
                <td>Test Cases</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Test 1</td>
            </tr>
            <tr>
                <td>Test 2</td>
            </tr>
            <tr>
                <td>Test 3</td>
            </tr>
            <tr>
                <td>Test 4</td>
            </tr>
        </tbody>  
    </table>