gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:59:50 25 4
gpt4 key购买 nike

您好,我正在尝试使用我能够实现的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com