I've a HTML table with many columns (even 50 columns!).
I'm trying to have the possibility to scroll horizontally (all the table) and vertically (with fixed header).
All the solutions listed in the following link have a small bug: if in Chrome I do ctrl+f to find a specific column name (my table have many columns!), the header doesn't scroll automatically horizontally (native functionality of Chrome).
The link with the solutions tried: HTML table with 100% width, with vertical scroll inside tbody
Any solution to propose?
You could put the table inside a div with max-width:100% and overflow-x: auto;. Using the accepted solution from the SO-post you linked I have created a simple example:
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
.table-master {
max-width: 300px;
overflow-x: auto;
}
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: hidden;
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-master">
<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 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</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 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>
<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>
In this example I used max-width:300px; to make the effect visible
I worked the last three days on this problem.
You may find some nice JQuery solutions.
Here is my approach in plain and pure JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="utf-8">
<title>Table Test</title>
<script type="text/javascript">
window.onload = function() { NoScrollTables(); }
/* Set all tables, where a "noscroll-"+id exists to no scroll */
function NoScrollTables()
{
var list = document.getElementsByTagName('table');
for (var i = 0; i < list.length; i++)
{
if (document.getElementById('noscroll-' + list[i].id) != null) NoScrollTable(list[i].id);
}
};
/* Initialize a single table to no-scroll */
function NoScrollTable(TabId)
{
var headerwidth=[]; // Storage for width of main table
var maintab = document.getElementById(TabId);
var noscroll = document.getElementById('noscroll-'+TabId);
var restwidth = noscroll.offsetWidth;
for (var i = 0; i < maintab.rows[1].cells.length; i++) headerwidth[i] = maintab.rows[1].cells[i].clientWidth;
var content = maintab.rows[0].innerHTML;
noscroll.rows[0].innerHTML = content;
maintab.rows[0].innerHTML='';
for (i = 0; i < maintab.rows[1].cells.length; i++) // Set width for both tables identically
{
noscroll.rows[0].cells[i].width = headerwidth[i];
maintab.rows[1].cells[i].width = headerwidth[i];
restwidth = restwidth - headerwidth[i];
}
i--;
noscroll.rows[0].cells[i].width = parseInt(noscroll.rows[0].cells[i].width) + parseInt(restwidth); // Expand last cell over possible scrollbar
return;
};
</script>
<style type="text/css">
body {
text-align: left;
}
table{
width: 100%;
border: 0;
border-spacing: 0;
padding: 0;
clear: both;
}
table th{
background-color:#456789;
display: inline-block;
float: left;
padding: 0;
}
table td{
background-color:#999;
}
</style>
</head><body>
<h1>Pretty Table with pure JavaScript</h1>
<p>Just put an empty table above and name the id with praefix 'noscroll-{mytable}' where {mytable} is the id of the table below.<br/><br/></p>
<div style="width:600px;">
<table id='noscroll-TestTable' >
<thead>
<tr></tr>
</thead>
</table>
</div>
<div style="width:600px; max-height: 300px; overflow: auto;">
<table id='TestTable' style='max-height: 180px; overflow-y: auto;'>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JSFiddle: https://jsfiddle.net/Mac65/mf494nuw/34/
Related
I am trying to keep the thead in a sticky position. It works, but the border is still on scroll not being in a sticky state. How to solve the problem?
Here's my code:
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
border-bottom: 1px solid black;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Live Demo
You can use ::before and ::after selectors to add the border.
table {
border-collapse: collapse;
border: 1px solid gray;
border-top: none;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid black;
}
.container {
overflow-y: auto;
height: 200px;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}
thead::after,
thead::before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
thead::before {
top: 0;
border-top: 1px solid gray;
margin-top: -0.5px;
}
thead::after {
bottom: 0;
border-bottom: 1px solid gray;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Use border-collapse: separate; instead of border-collapse: collapse; in your table CSS
In thead element you can use box-shadow property and border-bottom as transparent property.
Check below snippet hope will help you a lot.
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
border-bottom: transparent;
box-shadow: 0 0px 0.5px 1px gray;
}
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
Quite simple really. I've probably missed something obvious but here goes.
I have a <table> inside a multi-column view. The idea being, it's a fairly tall table so having it on multiple columns makes it less obnoxiously vertical and fits better on-screen.
The problem is that the rows in columns 2 and beyond have no header.
If I go to Print Preview, however, each column has a "copy" of the <thead> - as it should, IMO, since that's what the <thead> is for.
Is it possible to get this behaviour, apparently only available by default in #media print, to work on the webpage itself?
(Note that the table's contents are dynamic and the whole thing should be responsive, so manually inserting / breaking up the table is a no-go.)
#container {
column-count: 3;
}
<div id="container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>
I have this repeater i want to show scroll and fixed header and footer
below is code which i did to show in repeater
<table>
<thead>
<tr>
<td>Sr No.</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Salary</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="repEmpList" runat="server">
<ItemTemplate>
<tr>
<td><%#Container.ItemIndex+1 %></td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
now i want both scrolls horizontal and vertical with fixed header and footer
how can i do that?
Please help me
Thank you in advance
thead, tbody { display: block; width:500px; padding: 0px; }
td {width:150px;}
th {width:150px;}
#thbold {
text-align: center;
color: red;
}
td { padding : 0px;}
th { padding : 0px;}
tr { padding : 0px;}
table, td, th {
border: 2px solid black;
margin : 0px;
padding : 0px;
}
tbody {
height: 100px; /* Just for the demo */
overflow-y: scroll; /* Trigger vertical scroll */
overflow-x: scroll; /* Hide the horizontal scroll */
}
<html>
<body>
<table style="width:300px;">
<tbody>
<tr id="thbold">
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</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>
</tr><tr>
<td>Content 1</td>
<td>Content 2</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>
</tr>
</tbody>
</table>
</body>
</html>
this is a very quickly done code, though this seems to cater to your needs. feel free to modify and style it as per your needs. Remember to set the thead and tbody as display type to block, and limit height and width of block, set overflow-x, overflow-y to scroll. Please feel free to ask for further clarifications
Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
div{
width:500px;
height:500px;
display:block;
}
table
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
border:1px solid black;}
}
Fiddle:
http://jsfiddle.net/KrP7v/117/
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
CSS
#tableContainer{
float:left;
height:100px;
display:block;
overflow-y: scroll;
float:left
}
table
{
height:100px;
display:block;
float:left;
}
table td{
border:1px solid black;}
}
http://jsfiddle.net/4erveak/KrP7v/118/
Here is fix for your bug but at end add a div and get them style clear:both
I have this scrollable table that sometimes Isn't full, like this:
2 things happening here: the background disappears and the th columns are just not aligned.
I was messing around with a demo I found somewhere and I read that display: table-header-group actually aligns the tbody with the header, the problem here is that if I use that then the scroll stops working: here's what I have so far:
.scroll {
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
font-family: Raleway;
padding-top: 15px;
padding-left: 15px;
border-collapse: collapse;
color: #005693;
border-radius: 10px;
font-size: 12px;
text-align: center;
}
.scroll tbody, .scroll thead {
display:block;
}
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.scroll tbody {
border-top: 2px solid black;
}
.scroll tbody td, thead th {
/* width: 20%; */
/* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
.scroll tbody td:last-child, thead th:last-child {
border-right: none;
}
<table class="scroll">
<thead>
<tr>
<th>Job</th>
<th>Client ID</th>
<th>Company</th>
<th>Representative</th>
<th>Status</th>
<th>Report</th>
<th>Recieved</th>
<th>Delivered</th>
<th>Quotation</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 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></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 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></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 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></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 6</td>
<td>Content 7</td>
<td></td>
<td></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 6</td>
<td>Content 7</td>
<td></td>
<td></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 6</td>
<td>Content 7</td>
<td></td>
<td></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 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
How can I align the tbody with the thead having in account that content 8 and 9 are not always used? Also of course keeping the scroll.
Here's the fiddle http://jsfiddle.net/CrSpu/4574/
in case anybody has the same issue i found a great solution, here's a fiddle of it. if you want to add rows just keep adding the +td css and your preferred sizes :D
http://jsbin.com/bagaro/1/edit?html,output