I have a table like that which i fill with a data
<table id="products-table" style="overflow-y:scroll" >
<thead>
<tr>
<th>Product (Parent Product)</th>
<th>Associated Sites</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
<a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
</td>
<td>
<span class="lesser"></span>
</td>
<td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
@Html.ActionLink("Associate Site", "Associate", "Products")
</td>
</tr>
}
<tr>
</tbody>
</table>
and CSS like that
#products-table
{
width: 200px;
height: 400px;
overflow:scroll;
}
but scroll doesn't work, I want to fix the height of the table and if it exceeds, then work with scrollbar
This question is related to
html
css
html-table
Adds a fading gradient to an overflowing HTML table element to better indicate there is more content to be scrolled.
See the live example below:
$("#scrolltable").html("<table id='cell'><tbody></tbody></table>");_x000D_
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");_x000D_
_x000D_
for (var i = 0; i < 40; i++) {_x000D_
$("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");_x000D_
}
_x000D_
/* Table with fixed header */_x000D_
_x000D_
table,_x000D_
thead {_x000D_
width: 100%;_x000D_
text-align: left;_x000D_
}_x000D_
_x000D_
#scrolltable {_x000D_
margin-top: 50px;_x000D_
height: 120px;_x000D_
overflow: auto;_x000D_
width: 200px;_x000D_
}_x000D_
_x000D_
#scrolltable table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
_x000D_
#scrolltable tr:nth-child(even) {_x000D_
background: #EEE;_x000D_
}_x000D_
_x000D_
#scrolltable th div {_x000D_
position: absolute;_x000D_
margin-top: -30px;_x000D_
}_x000D_
_x000D_
_x000D_
/* Custom scrollbar */_x000D_
_x000D_
::-webkit-scrollbar {_x000D_
width: 8px;_x000D_
}_x000D_
_x000D_
::-webkit-scrollbar-track {_x000D_
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);_x000D_
border-radius: 10px;_x000D_
}_x000D_
_x000D_
::-webkit-scrollbar-thumb {_x000D_
border-radius: 10px;_x000D_
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);_x000D_
}_x000D_
_x000D_
_x000D_
/* Overflow scroll gradient */_x000D_
_x000D_
.overflow-scroll-gradient {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.overflow-scroll-gradient::after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
bottom: 0;_x000D_
width: 240px;_x000D_
height: 25px;_x000D_
background: linear-gradient( rgba(255, 255, 255, 0.001), white);_x000D_
pointer-events: none;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="overflow-scroll-gradient">_x000D_
<div id="scrolltable">_x000D_
</div>_x000D_
</div>
_x000D_
Works only in Chrome but it can be adapted to other modern browsers. Table falls back to common table with scroll bar in other brws. Uses CSS3 FLEX property.
<table border="1px" class="flexy">
<caption>Lista Sumnjivih vozila:</caption>
<thead>
<tr>
<td>Opis Sumnje</td>
<td>Registarski<br>broj vozila</td>
<td>Datum<br>Vreme</td>
<td>Brzina<br>(km/h)</td>
<td>Lokacija</td>
<td>Status</td>
<td>Akcija</td>
</tr>
</thead>
<tbody>
<tr>
<td>Osumnjicen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjicen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjicen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjicen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
</tbody>
</table>
Style (CSS 3):
caption {
display: block;
line-height: 3em;
width: 100%;
-webkit-align-items: stretch;
border: 1px solid #eee;
}
.flexy {
display: block;
width: 90%;
border: 1px solid #eee;
max-height: 320px;
overflow: auto;
}
.flexy thead {
display: -webkit-flex;
-webkit-flex-flow: row;
}
.flexy thead tr {
padding-right: 15px;
display: -webkit-flex;
width: 100%;
-webkit-align-items: stretch;
}
.flexy tbody {
display: -webkit-flex;
height: 100px;
overflow: auto;
-webkit-flex-flow: row wrap;
}
.flexy tbody tr{
display: -webkit-flex;
width: 100%;
}
.flexy tr td {
width: 15%;
}
For those wondering how to implement Garry's solution with more than one header this is it:
#wrapper {_x000D_
width: 235px;_x000D_
}_x000D_
_x000D_
table {_x000D_
border: 1px solid black;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
th,_x000D_
td {_x000D_
width: 100px;_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
thead>tr {_x000D_
position: relative;_x000D_
display: block;_x000D_
}_x000D_
_x000D_
tbody {_x000D_
display: block;_x000D_
height: 80px;_x000D_
overflow: auto;_x000D_
}
_x000D_
<div id="wrapper">_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>column1</th>_x000D_
<th>column2</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>row1</td>_x000D_
<td>row1</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>row2</td>_x000D_
<td>row2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>row3</td>_x000D_
<td>row3</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>row4</td>_x000D_
<td>row4</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
</div>
_x000D_
For whatever it's worth now: here is yet another solution:
display: inline-block
tabhead
)tabfull
)setTimeout(() => {/*...*/})
to execute code after render / after filling the table with results from fetch
clientWidth
) With a few tweaks, this is the method to use (for brevity / simplicity, I used d3js, the same operations can be done using plain DOM):
setTimeout(() => { // pass one cycle
d3.select('#tabfull')
.style('margin-top', (-1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height) + 'px')
.select('thead')
.style('visibility', 'hidden');
let widths=[]; // really rely on COMPUTED values
d3.select('#tabfull').select('thead').selectAll('th')
.each((n, i, nd) => widths.push(nd[i].clientWidth));
d3.select('#tabhead').select('thead').selectAll('th')
.each((n, i, nd) => d3.select(nd[i])
.style('padding-right', 0)
.style('padding-left', 0)
.style('width', widths[i]+'px'));
})
Waiting on render cycle has the advantage of using the browser layout engine thoughout the process - for any type of header; it's not bound to special condition or cell content lengths being somehow similar. It also adjusts correctly for visible scrollbars (like on Windows)
I've put up a codepen with a full example here: https://codepen.io/sebredhh/pen/QmJvKy
This work for me
Demo: jsfiddle
$(function()
{
Fixed_Header();
});
function Fixed_Header()
{
$('.User_Table thead').css({'position': 'absolute'});
$('.User_Table tbody tr:eq("2") td').each(function(index,e){
$('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
});
var Header_Height = $('.User_Table thead').outerHeight();
$('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
$('.User_Table').css({'margin-top' : Header_Height+"px"});
}
Late answer, another idea, but very short.
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
Note that it is possible to display table as inline-block due to anonymous table objects:
"missing" [in HTML table tree structure] elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself.
/* scrolltable rules */_x000D_
table { margin-top: 20px; display: inline-block; overflow: auto; }_x000D_
th div { margin-top: -20px; position: absolute; }_x000D_
_x000D_
/* design */_x000D_
table { border-collapse: collapse; }_x000D_
tr:nth-child(even) { background: #EEE; }
_x000D_
<table style="height: 150px">_x000D_
<tr> <th><div>first</div> <th><div>second</div>_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo foo foo foo foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar bar bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
<tr> <td>foo <td>bar_x000D_
</table>
_x000D_
<div style="overflow:auto">
<table id="table2"></table>
</div>
Try this code for overflow table it will work only on div tag
.outer {_x000D_
overflow-y: auto;_x000D_
height: 300px;_x000D_
}_x000D_
_x000D_
.outer {_x000D_
width: 100%;_x000D_
-layout: fixed;_x000D_
}_x000D_
_x000D_
.outer th {_x000D_
text-align: left;_x000D_
top: 0;_x000D_
position: sticky;_x000D_
background-color: white;_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
<meta http-equiv="X-UA-Compatible" content="ie=edge">_x000D_
<title>MYCRUD</title>_x000D_
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">_x000D_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="container-fluid col-md-11">_x000D_
<div class="row">_x000D_
_x000D_
<div class="col-lg-12">_x000D_
_x000D_
_x000D_
<div class="card-body">_x000D_
<div class="outer">_x000D_
_x000D_
<table class="table table-hover bg-light">_x000D_
<thead>_x000D_
<tr>_x000D_
<th scope="col">ID</th>_x000D_
<th scope="col">Marca</th>_x000D_
<th scope="col">Editar</th>_x000D_
<th scope="col">Eliminar</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
_x000D_
_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>Toyota</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>Honda </td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>5</td>_x000D_
<td>Myo</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>6</td>_x000D_
<td>Acer</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>7</td>_x000D_
<td>HP</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>8</td>_x000D_
<td>DELL</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>9</td>_x000D_
<td>LOGITECH</td>_x000D_
<td> <a class="btn btn-success" href="#">_x000D_
<i class="fa fa-edit"></i>_x000D_
</a>_x000D_
</td>_x000D_
<td> <a class="btn btn-danger" href="#">_x000D_
<i class="fa fa-trash"></i>_x000D_
</a>_x000D_
</td>_x000D_
</tr>_x000D_
_x000D_
</tbody>_x000D_
</table>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>
_x000D_
Source: Stackoverflow.com