Fix first row table

Question

I need to fix the first line of my table always at the top of the page. I have read several questions about this same problem, but I could not solve...

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 lot of things, but I chose to take them out so they wouldn’t hurt the code. I thought I’d just get the first one tr in css and put position:fixed. And then another div wrapped around the others trs, ie wrapped in php tags. But the biggest problem is that the width of each cell of the table does not follow the width of the cells th and then everything gets crooked because the width of the table gets smaller than the first line...
I want to do this with css (accepted solution with javascript in second case, but no jquery, please) Thanks!

Answer 1

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

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

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>

Answer 2

A more current approach would be using position:sticky in <th>. This causes this part of the table to remain fixed in place while the rest of the content does the scroll normally.

Follow a basic example using this property:

div {
  height: 100px;
  background: yellow;
  border: 1px solid black;
  overflow-y: scroll;
  width: 250px;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th {
  position: sticky;
  top: 0;
  background: red;
}

<div>
    <table>
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </tbody>
    </table>
  </div>

OBS: You can refer to the browser support for position:sticky here, but already I say that does not work in IE: https://caniuse.com/#feat=css-Sticky

Answer 3

Dude I think it does. Take a look at this jsfiddle: http://jsfiddle.net/dPixie/byB9d/3/

You need to use the tag thead for that reason:

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

And now the HTML:

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>