Fix first line table

Question

Fix first line table

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

7

I need to set the first row 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 number of things, but I preferred to take it to avoid harming the code. I figured I'd just get the first tr in css and put position:fixed . And then another div surrounded by the other trs , that is, surrounded by php tags. But the biggest problem is that the width of each cell in the table does not follow the width of cells th and there everything is crooked because the width of the table is smaller than the width of the first row ...
I want to do this with css (I accept solution with javascript in the second case, but without jquery, please) Thanks!

css table

asked by anonymous 19.12.2014 / 02:17

3 answers

What does it mean to create an object with an asterisk? [duplicate] Best practice to check if the module is being used

score 3 · Answer 1

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

And you used php to define the colors of each line. It can also be done via css3 with the 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>

score 2 · Answer 2

A more current approach would be to use 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.

Here's 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 check the support of browsers at position:sticky here, but I'll tell you what does not work in IE: link

score 1 · Answer 3

Dude, I think it does. Take a look at this jsfiddle: link

You need to use the thead tag for this:

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>