css – Fix first table row

Question:

I need to fix the first row of my table always at the top of the page. I've read several questions about this same problem, but I couldn't solve it…

my code:

<table border="2px">

 <tr bgcolor="0099FF" id="topo">
      <th> ID </th>
      <th> Acertos Humanas </th>
      <th> Nota humanas </th>
      <th> Acertos Naturezas </th>
      <th> Nota Naturezas </th>
      <th> Acertos Linguagens </th>
      <th> Nota Linguagens </th>
      <th> Acertos Matematica </th>
      <th> Nota Matematica </th>
      <th> Soma acertos </th>
      <th> Soma notas </th>
      <th> Soma acertos(2) </th>
      <th> Redacao </th>
      <th> Media sem redacao </th>
      <th> Media com redacao </th>
 </tr>


<?php 

$tudo = file('notas.txt');

for ($l=0; $l<90; $l++) {

    $cada_item[$l] = explode (" ", $tudo[$l]);

    $idd = $l+1;

    $cor = $l%2 !=0 ? "#D0D0D0" : "white"; 

    echo '<tr bgcolor="'.$cor.'"><td>'. $idd ."</td>";

      for ($i=0; $i<14; $i++) {
          echo "<td>". $cada_item[$l][$i] ."</td>";
      }

    echo "</tr>";
}

?>

</table>

I tried a number of things, but I preferred to take them out so as not to harm the code. I thought it was just taking the first tr in the css and putting position:fixed . And then another div around the other trs , that is, around the php tags. But the biggest problem is that the width of each table cell does not follow the width of the th cells and then everything is crooked because the width of the table is smaller than that of the first row…
I want to do it with css (accept javascript solution in second case, but without jquery please) Thanks!

Answer:

Yes, just use position:fixed and, set a fixed width for the cells.

And you used repetition in php to set the colors of each line. It can also be done through css3 with the nth-child selector

table {
    border:1px solid #aaa;
    table-layout: fixed;
    box-sizing: border-box; 
    width:500px;
}

tr:first-child {
    background: #0099FF;
    position:fixed;
}

th, td {
    width:25%;
}

tr:not(:first-child):nth-child(odd) {
    background:#D0D0D0
}

<table>
    <tr>
        <th>ID</th>
        <th>Acertos Humanas</th>
        <th>Notas Humanas</th>
        <th>Acertos Naturezas</th>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>7.0</td>
        <td>6</td>
    </tr>
    <tr>
        <td>2</td>
        <td>6</td>
        <td>5.0</td>
        <td>2</td>
    </tr>
</table>