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

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>";

工作演示