Set rows in table

Question

Set rows in table

Navigation

#1 by (1 votes)
#2 by (0 votes)

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 set the header and footer and make the scroll available.

My question runs away from the context of similar questions, as I merge lines into the header.

The desired result would be:

Given the scrolling and alignment of the columns.

I would very much like to use apeans a table.

html css table

asked by anonymous 04.11.2016 / 13:22

2 answers

PHP and Javascript - Sending HTML attachment in email Return value entered after performing INSERT

score 1 · Answer 1

First of all, how about organizing your table?

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

And 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 it is, the line that actually does the job is this:

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

Where you arrow height and 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 with javascript, there are multiple codes ready teaching you how to do it.

score 0 · Answer 2

0

I would personally 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.

04.11.2016 / 13:34