Fix rows in table

Asked

Viewed 611 times

0

I have the following table:

.mytable {
  width: 100%;
  height: 150px;
  overflow-y: auto;
}

.header, .footer {
  //position: absolute;
}
<table border="1" class="mytable">
   <tr class="header">
     <th rowspan="2">H1</th>
     <th colspan="3">H2</th>
     <th rowspan="2">H3</th>
     <th rowspan="2">H4</th>
   </tr>
   <tr class="header">
     <th>H2.1</th>
     <th>H2.2</th>
     <th>H2.3</th>
   </tr>
   
   <tr>
     <td>I1 H1</td>
     <td>I1 H2</td>
     <td>I1 H3</td>
     <td>I1 H4</td>
     <td>I1 H5</td>
     <td>I1 H6</td>
   </tr>
   
   <tr>
     <td>I2 H1</td>
     <td>I2 H2</td>
     <td>I2 H3</td>
     <td>I2 H4</td>
     <td>I2 H5</td>
     <td>I2 H6</td>
   </tr>
   
   <tr>
     <td>I3 H1</td>
     <td>I3 H2</td>
     <td>I3 H3</td>
     <td>I3 H4</td>
     <td>I3 H5</td>
     <td>I3 H6</td>
   </tr>
   
   <tr>
     <td>I4 H1</td>
     <td>I4 H2</td>
     <td>I4 H3</td>
     <td>I4 H4</td>
     <td>I4 H5</td>
     <td>I4 H6</td>
   </tr>
   
   <tr>
     <td>I5 H1</td>
     <td>I5 H2</td>
     <td>I5 H3</td>
     <td>I5 H4</td>
     <td>I5 H5</td>
     <td>I5 H6</td>
   </tr>
   
   <tr>
     <td>I6 H1</td>
     <td>I6 H2</td>
     <td>I6 H3</td>
     <td>I6 H4</td>
     <td>I6 H5</td>
     <td>I6 H6</td>
   </tr>
   
   <tr class="footer">
     <th>FH1</th>
     <th>FH2</th>
     <th>FH3</th>
     <th>FH4</th>
     <th>FH5</th>
     <th>FH6</th>
   </tr>
   
</table>

I would like to fix the header and footer and make scroll available.

My question departs somewhat from the context of similar questions, as I merge lines in the header.

The desired result would be:

inserir a descrição da imagem aqui

Considering the scroll and the alignment of the columns.

I would love to use apeans a table.

html css table

  • I don’t understand. What do you want to do?

  • put the scroll in the table and leave the header and footer fixed...

2 answers

1

First of all how about organizing your table?

Use the tags thead, tbody and tfoot for better organization of your table. Read more about this in this answer

But the answer you’re looking for would be something like this?

.mytable {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
.mytable tr {
  display: flex;
}
.mytable td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break;
}

.mytable thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.mytable tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}
<table border="1" class="mytable">
  <thead>
    <tr class="header">
      <th rowspan="2">H1</th>
      <th colspan="3">H2</th>
      <th rowspan="2">H3</th>
      <th rowspan="2">H4</th>
    </tr>
    <tr class="header">
      <th>H2.1</th>
      <th>H2.2</th>
      <th>H2.3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>

    <tr>
      <td>I2 H1</td>
      <td>I2 H2</td>
      <td>I2 H3</td>
      <td>I2 H4</td>
      <td>I2 H5</td>
      <td>I2 H6</td>
    </tr>

    <tr>
      <td>I3 H1</td>
      <td>I3 H2</td>
      <td>I3 H3</td>
      <td>I3 H4</td>
      <td>I3 H5</td>
      <td>I3 H6</td>
    </tr>

    <tr>
      <td>I4 H1</td>
      <td>I4 H2</td>
      <td>I4 H3</td>
      <td>I4 H4</td>
      <td>I4 H5</td>
      <td>I4 H6</td>
    </tr>

    <tr>
      <td>I5 H1</td>
      <td>I5 H2</td>
      <td>I5 H3</td>
      <td>I5 H4</td>
      <td>I5 H5</td>
      <td>I5 H6</td>
    </tr>

    <tr>
      <td>I6 H1</td>
      <td>I6 H2</td>
      <td>I6 H3</td>
      <td>I6 H4</td>
      <td>I6 H5</td>
      <td>I6 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
    <tr>
      <td>I1 H1</td>
      <td>I1 H2</td>
      <td>I1 H3</td>
      <td>I1 H4</td>
      <td>I1 H5</td>
      <td>I1 H6</td>
    </tr>
  </tbody>

  <tfooter>
    <tr class="footer">
      <th>FH1</th>
      <th>FH2</th>
      <th>FH3</th>
      <th>FH4</th>
      <th>FH5</th>
      <th>FH6</th>
      <tr>
  </tfooter>

</table>

If that’s it, the line that really does the job is this:

.mytable tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}

Where do you arrow the height and the overflow-y.

For more information, see this question.

Well, this is only done with CSS and generates a second scroll.

However, if you want to do javascript, there are several ready codes teaching how to do.

  • That’s right @Randrade and thank you so much for the tip from the organization. I just can’t work well with the alignment, because see that in your code is different from the original...

  • @Jedaiasrodrigues This is nothing more than CSS. Just remove the other lines you find unnecessary for the layout that will look the same.

0

Personally I would use a div fixed at the top with a table with the headers and below another div with the table with content, so the scroll is easy and created by the browser itself.

  • The problem is the alignment, although I have exemplified with a fixed code, the table columns are dynamic, which would make it a little harder to work with Divs.

  • Got it! In this case the @Randrade template or use plugins...

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.