Formatting issue in scrollable table with fixed header

Question

I am developing one web application where I am reading data from table and displaying on web page in dynamic table.

PHP Code

$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 code

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

But width of header cells and body cells are different. How can I keep same width of header and body cells.

Pupil · Accepted Answer · 2014-12-10 08:27:07Z

1

You already have wrapper div around the data table.

Just add some height to to it and let it scroll.

Every thing else will be taken care of.

Change

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

To

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

Working Demo

answered Dec 10, 2014 at 8:27

Pupil

24k6 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manish Over a year ago

But in my example column header width is more or less than width of column values so another formatting issue.

Collectives™ on Stack Overflow

Formatting issue in scrollable table with fixed header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related