how do we fixed scroll with fix header and adjust width of headers as well as td equal?

Question

if I add n No. of header it will set with certain min-width and if total min-width of headers width above the 100% of table widht scroll have to provide , simultanously want td width equal to header width :

html code is as below: https://jsfiddle.net/1w7vnLec/

<html>
<head>
<style>
table.scroll {
     width: 100%; 
     /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: scroll;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

</style>




</head>
<body>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
            <th>Head 6</th>
            <th>Head 7</th>
            <th>Head 8</th>
            <th>Head 9</th>
            <th>Head 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
             <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>

    </tbody>
</table>
</body>
</html>

how do we fixed scroll with fix header and adjust width of headers as well as td equal ?

i wand header and td width same n scroll proper after achived 100% of table width — PHPDEVLOPER, Mar 18 '19 at 07:58
Simply remove `table.scroll tbody, table.scroll thead { display: block; }` and your `th` width will be the same as your `tds`. If you don't want any line breaks, use `white-space: nowrap;` — Jake, Mar 18 '19 at 08:26
Possible duplicate of [Fix table head while scrolling tbody and thead column aligned to tbody column](https://stackoverflow.com/questions/55040665/fix-table-head-while-scrolling-tbody-and-thead-column-aligned-to-tbody-column) — Sarabjit Singh, Mar 18 '19 at 08:38
@SarabjitSingh ya but there is header not scroll horizontally with td — PHPDEVLOPER, Mar 18 '19 at 09:07
@Jake ya its work but in jsfiddle only when i run same code on browser i couldnt get scroll even i added 20 -colums and not getting vertical scroll even i provide height 50px — PHPDEVLOPER, Mar 18 '19 at 09:20
Remove your JS. Remove the previously mentionned CSS and set a minimum width to your `td`s. See this [jsfiddle](https://jsfiddle.net/5ea39d1s/) — Jake, Mar 18 '19 at 09:27
Set its parent to `scroll: overflow`, see this [fork](https://jsfiddle.net/79dc1n4e/) of my previous jsfiddle. — Jake, Mar 18 '19 at 09:54
@PHPDEVLOPER I posted my comments as an answer for others who might have the same problem. — Jake, Mar 18 '19 at 10:22

Jake · Accepted Answer · 2019-03-18T12:08:04.017

Remove your JS and remove this CSS

table.scroll tbody,
table.scroll thead {
    display: block;
}

Then set a min-width to your tds and set its parent to scroll: overflow or scroll: auto overflow-x: auto depending on the behavior you're looking for.

Here is a working code snippet :

.scroll {
  overflow: scroll;
}

table {
     width: 100%; 
    border-spacing: 0;
    border: 2px solid black;
}

thead tr th { 
    height: 30px;
    line-height: 30px;
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: scroll;
}

tbody {
    border-top: 2px solid black;
}

tbody td,
thead th {
    border-right: 1px solid black;
}

tbody td:last-child,
thead th:last-child {
    border-right: none;
}

tbody td {
    min-width: 200px;
}

<html>
<head>
 <script  src="jquery-1.9.1.min.js"></script>




</head>
<body>
<div class="scroll">
<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
            <th>Head 6</th>
            <th>Head 7</th>
            <th>Head 8</th>
            <th>Head 9</th>
            <th>Head 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
    <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
   <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
    <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
    <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
    <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

is it possible to fixed vertical scroll fit to screen display rather at the end of the horizontal bar goes,is it move from display as horizontal bar cross main width? — PHPDEVLOPER, Mar 18 '19 at 10:37
when there is two columns its not fited in 100%width automatically — PHPDEVLOPER, Mar 18 '19 at 11:08
Set `overflow` to `auto` instead of `scroll`, I updated my answer — Jake, Mar 18 '19 at 11:13
want to fixted it on display screen and move according to scroon scroll ,stick its position on display resolution — PHPDEVLOPER, Mar 18 '19 at 11:25
and its also not ajustable in fullscreen when only 2 columns are there — PHPDEVLOPER, Mar 18 '19 at 11:26
To remove the vertical scrollbar at the end use `overflow-x: auto` on the parent container. It is ajustable to fullscreen by default, if your device is a mobile (as in your device's width is below 400px), adjust the `min-width` of the `td`s. — Jake, Mar 18 '19 at 12:10

how do we fixed scroll with fix header and adjust width of headers as well as td equal?

1 Answers1