So for the below table, i am trying to apply the scroll for the tbody, so that the table header will stick. How can i achieve this, also when i tried making the display to block for the tbody the alignment is breaking.
Tried with this but the alignment got broke:
tbody{
display: block;
height: 600px;
overflow: auto;
}
What is the best way to achieve this and to implement horizontal scroll if the heading of columns got increased?
Any help will be appreciated :)
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
border: 1px solid #ddd;
padding: 4px;
}
tr:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: black;
}<table><thead><tr><th>Name</th><th>Total Count</th><th>Total People</th><th>Summary Count</th><th>Manual Count</th><th>Value on Count</th></tr></thead><tbody><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>Test1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody></table>