0

I'm trying to make a table header fixed, and be able to scroll the contents of the table.

I'm able to do it through researching on how to make <th> fixed, but I have a problem.

Making <th> fixed requires at least 2 tables. I have 12 columns so it is hard to align the 2nd table with the 1st table.

1st table = contain <th> fixed 2nd table = contents

Any idea how to make the two tables align? Is there any way to make <th> fixed by only making use of one table?

<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
  <td></td>
  <td>Steps</td>
  <td>Activities</td>
  <td>Details</td>
  <td>Responsibilities</td>
  <td>Mandatory <br> Deliverables </td>
  <td>Custom <br> Build</td>
  <td>Packaged <br> Solution</td>
  <td>Consulting <br> Services</td>
  <td>Infrastructure <br> Projects </td>
  <td>POC</td>
  <td>Maintenance</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 101.3%">
  <table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Zul Hazmi
  • 329
  • 2
  • 5
  • 13
  • possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) – Michael Benjamin Sep 22 '15 at 03:45

2 Answers2

0

There's a good in-depth answer by Hashem Qolami in this thread:

HTML table with 100% width, with vertical scroll inside tbody

I don't advise using two tables. Better to use one table, put the header in between

<thead>
    <tr>
       <th>Steps</th>
       ...
    </tr>
</thead>

and the content of the table in between

<tbody>...</tbody>

and use some css as Hashem showed.

Community
  • 1
  • 1
starblazer
  • 46
  • 2
0

you can see on : http://jsfiddle.net/hashem/crspu/555/

you can easy to used below code : 

<table style="width: 100%;display:block;">
     <thead style=" display: inline-block;width: 100%;height: 20px;">
          <tr>
  <th>Month</th>
  <th>Savings</th>
</tr>
</thead>


<tbody style="height:200px;display:inline-block;width:100%;overflow:auto;">
<tr>
  <td>January</td>
  <td>$100</td>
</tr>
........


<tr>
  <td>January</td>
  <td>$100</td>
</tr>


</tbody>


<tfoot style="display: inline-block;width: 100%;height: 20px;">
<tr>
  <td>Sum</td>
  <td>$180</td>


 </tr>


</tfoot>
</table>
Tarun Gupta
  • 1
  • 2