具有固定标头的可滚动表格式化问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有固定标头的可滚动表格式化问题相关的知识,希望对你有一定的参考价值。
我正在开发一个Web应用程序,我从表中读取数据并在动态表格中显示在网页上。
php代码
$file = fopen("Infile.csv","r");
while(!feof($file))
{
$line = trim(fgets($file));
$vv = explode(" ", $line);
if($line)
{
if($vv[0] == "Col1")
{
echo "<table class=sampletable border=1 cellpadding=0 cellspacing=0>
<tr><th width=7%>$vv[0]</th><th width = 9.6%>$vv[1]</th><th width =10%>$vv[2]</th><th width=7%>$vv[3]</th><th width=7%>$vv[4]</th><th>$vv[5]</th><th>$vv[6]</th><th>$vv[7]</th><th>$vv[8]</th></tr></table>";
echo "<div class=scroll><table class=sampletable>";
}
else {
echo "<tr><td width=7%>$vv[0]</td><td width = 9.6%>$vv[1]</td><td width =10%>$vv[2]</td><td width=7%>$vv[3]</td><td >$vv[4]</td><td>$vv[5]</td><td>$vv[6]</td><td>$vv[7]</td><td>$vv[8]</td></tr>";
}
}
}
fclose($file);
echo "</table></div>";
CSS代码
<style style="text/css">
.sampletable{
width:100%;
border-collapse:collapse;
}
.sampletable td{
padding:7px; border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.sampletable tr{
background: #b8d1f3;
}
.sampletable th{
background: #333333;
color:white;
}
/* Define the hover highlight color for the table row */
.sampletable tr:hover {
background-color: #ffff99;
}
</style>
但是头部细胞和体细胞的宽度是不同的。如何保持标题和正文细胞的宽度相同。
答案
你已经在数据表周围有了包装div。
只需添加一些高度,让它滚动。
其他所有事情都会得到照顾。
更改
echo "<div class=scroll><table class=sampletable>";
至
echo "<div class=scroll style='overflow: auto;height: 100px; width: 320px;'><table class=sampletable>";
以上是关于具有固定标头的可滚动表格式化问题的主要内容,如果未能解决你的问题,请参考以下文章