具有固定标头的可滚动表格式化问题

Question

我正在开发一个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>

但是头部细胞和体细胞的宽度是不同的。如何保持标题和正文细胞的宽度相同。

Answer 1

你已经在数据表周围有了包装div。

只需添加一些高度，让它滚动。

其他所有事情都会得到照顾。

更改

echo "<div class=scroll><table class=sampletable>";

至

echo "<div class=scroll style='overflow: auto;height: 100px; width: 320px;'><table class=sampletable>";

Working Demo