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

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

Working Demo

以上是关于具有固定标头的可滚动表格式化问题的主要内容,如果未能解决你的问题,请参考以下文章

可固定列的可滚动表,固定列大小相等

表格覆盖了粘贴标头。和边框在滚动时消失。如何解决?

使用 Reactstrap 响应式表的带有固定标题的可滚动表

Flexbox 类型的固定表头,表格标记的可滚动内容

带有两个列表片段的可滚动布局

如何制作具有固定列宽的 chrome 尊重表