Applying the scroll in table keeping the header fixed

Question

Applying the scroll in table keeping the header fixed

Navigation

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

1

I was looking for a way to apply vertical and horizontal scroll keeping the header fixed to my table.

I found in this fiddle a possible solution for this case.

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><thead><tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th><th>Column5</th></tr></thead><tbody><tr><td>Row1</td><td>Row1</td><td>Row1</td><td>Row1</td><td>Row1</td></tr><tr><td>Row2</td><td>Row2</td><td>Row2</td><td>Row2</td><td>Row2</td></tr><tr><td>Row3</td><td>Row3</td><td>Row3</td><td>Row3</td><td>Row3</td></tr><tr><td>Row4</td><td>Row4</td><td>Row4</td><td>Row4</td><td>Row4</td></tr><tr><td>Row5</td><td>Row5</td><td>Row5</td><td>Row5</td><td>Row5</td></tr><tr><td>Row6</td><td>Row6</td><td>Row6</td><td>Row6</td><td>Row6</td></tr><tr><td>Row7</td><td>Row7</td><td>Row7</td><td>Row7</td><td>Row7</td></tr><tr><td>Row8</td><td>Row8</td><td>Row8</td><td>Row8</td><td>Row8</td></tr><tr><td>Row9</td><td>Row9</td><td>Row9</td><td>Row9</td><td>Row9</td></tr><tr><td>Row10</td><td>Row10</td><td>Row10</td><td>Row10</td><td>Row10</td></tr></tbody></table>

WhenItrytopassthecodesnippetabovetomy file.html it does not correctly display the horizontal scroll.

I do not understand why fiddle worked and my file does not work.

javascript html jquery css

asked by anonymous 04.07.2017 / 14:03

2 answers

1

Your jquery script is running before the page, just put the script at the end that solves the problem.

04.07.2017 / 14:19

Hide text when it does not fit within the div [duplicate] Send email to multiple recipients

score 1 · Accepted Answer

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><thead><tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th><th>Column5</th></tr></thead><tbody><tr><td>Row1</td><td>Row1</td><td>Row1</td><td>Row1</td><td>Row1</td></tr><tr><td>Row2</td><td>Row2</td><td>Row2</td><td>Row2</td><td>Row2</td></tr><tr><td>Row3</td><td>Row3</td><td>Row3</td><td>Row3</td><td>Row3</td></tr><tr><td>Row4</td><td>Row4</td><td>Row4</td><td>Row4</td><td>Row4</td></tr><tr><td>Row5</td><td>Row5</td><td>Row5</td><td>Row5</td><td>Row5</td></tr><tr><td>Row6</td><td>Row6</td><td>Row6</td><td>Row6</td><td>Row6</td></tr><tr><td>Row7</td><td>Row7</td><td>Row7</td><td>Row7</td><td>Row7</td></tr><tr><td>Row8</td><td>Row8</td><td>Row8</td><td>Row8</td><td>Row8</td></tr><tr><td>Row9</td><td>Row9</td><td>Row9</td><td>Row9</td><td>Row9</td></tr><tr><td>Row10</td><td>Row10</td><td>Row10</td><td>Row10</td><td>Row10</td></tr></tbody></table>

Althoughitmayappearthattheorderisasshownabovewithinyourpage,clickrunandwithinthatareaclicktherightmousebuttonandselectviewsourcecodeandnotewherethecodesnippetislocated

$('table').on('scroll',function(){$("table > *").width($("table").width() + $("table").scrollLeft());
});

inside the html

Considerations ## Source

If you try to access some element of the DOM still in the head of the page, it will not exist and an error will happen. So the recommendation to put the script before closing the body tag.

HOWEVER, anyone using jQuery can use a library feature (which we can do with pure JS if we want) that allows you to load the script into head, but its execution is done only when the DOM is mounted (except loading images , which jQuery does not expect). This syntax can be:

$(document).ready(function() {
// seu código aqui
});