CODEWITHSUNDEEP
htmlcssscrollhtml-table
Sarin Jacob Sunny
Sarin Jacob Sunny

Reputation: 2138

Scrolling property for body part of the table not working

I have a table in which headers should be fixed at their positions and scrolling content.

I found way to scroll them by making first headeing using by a sepparate tables, and body part using a second table which is inside a div which is given scroll property.

But when the number of columns are getting increased, alligning the headings in first table and content in second table is getting difficult.

Thats why I am forced to create a scroll in tbody. But it is not working. I tried to give scroll property to the tbody part and fixed its height, but it is not scrolling.

The code which I am trying to correct is,

<table width="900" border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>

   <tbody style="height:5px; overflow:scroll;">
  <tr>
    <td height="10">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td height="10">7</td>
    <td>8</td>
    <td>9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="10">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td height="10">9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  </tbody>
</table>

And the code which creates fixed headers using 2 tables is

<table width="900" border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>
  </table>
 <div  style="height:50px; overflow-y:scroll; width:920px;">
<table width="900" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td height="10">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td height="10">7</td>
    <td>8</td>
    <td>9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="10">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td height="10">9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Upvotes: 0

Views: 1366

Answers (1)

Pal Singh
Pal Singh

Reputation: 1974

try it like this

<table width="900" border="1" cellspacing="0" cellpadding="0">
 <thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>

<tbody>
<tr>
  <td height="10" colspan="6">
    <div style="height:5px; overflow:scroll;">
        <!--put your new table here (content of tbody)-->

    </div>
</td>
</tr>

Upvotes: 1

Related Questions