php - 具有固定标题的可滚动表中的格式问题

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