html - 如何创建可滚动表格?

标签 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);
?>

如果我删除偶数个类名,它工作正常。

最佳答案

您必须使用 tbody 并设置溢出为自动并显示为 block 。

你能检查一下吗?

例子:

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>

关于html - 如何创建可滚动表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25662689/

相关文章:

html - 通用选择器对性能有何影响?

JQuery 在多个图像的鼠标悬停时切换可见性

html - CSS 悬停嵌套列表

javascript - 使用 puppeteer 来使用 CSS @media 规则

javascript - 如何在 Angular 9 中隐藏动态表的元素

html - 表单中的文本区域不可点击输入字段。 Bootstrap 3

html - 大于和小于的 CSS nth-child

html - 输入中 bootstrap 4 中的图标

javascript - 使 FlipClock.js 响应

java - JSP/JSTL 在表格中自动换行