Scrollable tbody doesn't occupy all available width - html

I have a table that contains a lot of rows (1000+). Structure is really simple, here is a simplified example with only one row.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
I need column names to be fixed, so I made tbody scrollable. I added these CSS rules
tbody {
display: block;
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
}
Here is a full JSfiddle example
There are 2 problems.
<tbody> doesn't occupy all the width. I tried with width: 100%; but it doesn't work. display: block; seems to prevent normal width behaviour but I need it for the scroll. How can I do it occupy all the available space? It's fine even if only 1 column get all the remaining space
<thead> and <tbody> column width is different. At the moment I use a jQuery piece of code to set headers width like other rows, this is fine but I wonder if a better solution is possible.


add this to css
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed; /* even columns width , fix width of table too*/
}


This answer can help: it gives all the possible solutions, both pure css and with jquery.
This a working solution in pure css where also <tbody> and <thead> have the same width:
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
thead {
border: 1px solid grey;
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: 100%;
}
tbody {
max-height: 150px;
width: 100%;
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
/* decorations */
.table-container {
border: 1px solid black;
padding: 0.3em;
}
table {
border: 1px solid lightgrey;
}
table td, table th {
padding: 0.3em;
border: 1px solid lightgrey;
}
table th {
border: 1px solid grey;
}
td{
word-wrap:break-word
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1akeuntveiuyrtiueyctiuyetiuyenaiuc</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value sifcaiuerycnpiuaerypintcer2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
EDIT - Alternative solution: If you remove display:block; from <tbody>, your code works.
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}


Define to this css
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid grey;
width: 100%;
text-align: left;
}
thead {
border: 1px solid grey;
}
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>

Related

tbody vertical scrollbar is only visible after horizontal scrolling

When the horizontal scrollbar is to the left, the vertical scrollbar is not present
When the horizontal scrollbar is to the right, the scrollbar is present
How can I make the vertical scrollbar show at all times (it should only cover tbody)
Here's the Stackblitz
And here's the code anyway:
table thead,
table tbody {
display: block;
}
tbody {
height: 160px;
overflow: auto;
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>

Leave out overflow: auto; from tbody, and add position: sticky; to thead. Make sure to add a background-color to thead so the table's content doesn't overlap when scrolling.
table thead,
table tbody {
display: block;
}
thead {
position: sticky;
top: 0;
background: white;
}
tbody {
height: 160px;
/* overflow: auto; */
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>

Position Sticky doesn't work with table th border property

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>

Fixed table header issues with align

I'm trying to make a table header fixed, and be able to scroll the contents of the table.
I'm able to do it through researching on how to make <th> fixed, but I have a problem.
Making <th> fixed requires at least 2 tables. I have 12 columns so it is hard to align the 2nd table with the 1st table.
1st table = contain <th> fixed
2nd table = contents
Any idea how to make the two tables align? Is there any way to make <th> fixed by only making use of one table?
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td></td>
<td>Steps</td>
<td>Activities</td>
<td>Details</td>
<td>Responsibilities</td>
<td>Mandatory <br> Deliverables </td>
<td>Custom <br> Build</td>
<td>Packaged <br> Solution</td>
<td>Consulting <br> Services</td>
<td>Infrastructure <br> Projects </td>
<td>POC</td>
<td>Maintenance</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 101.3%">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>

There's a good in-depth answer by Hashem Qolami in this thread:
HTML table with 100% width, with vertical scroll inside tbody
I don't advise using two tables. Better to use one table, put the header in between
<thead>
<tr>
<th>Steps</th>
...
</tr>
</thead>
and the content of the table in between
<tbody>...</tbody>
and use some css as Hashem showed.

you can see on : http://jsfiddle.net/hashem/crspu/555/
you can easy to used below code :
<table style="width: 100%;display:block;">
<thead style=" display: inline-block;width: 100%;height: 20px;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="height:200px;display:inline-block;width:100%;overflow:auto;">
<tr>
<td>January</td>
<td>$100</td>
</tr>
........
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
<tfoot style="display: inline-block;width: 100%;height: 20px;">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

Can't align thead and tbody in scrollable table

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

HTML table data is shifting in another columns

While solving fixed header issue Table data is mis-aligning(displaying) in another columns. The header is now fixed.
Any inputs to solve mis-align of data in another columns?
<html>
<head>
</head>
<body>
<table border="1" style="width: 600px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 620px;">
<table border="1" style="width: 600px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5 Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7 Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
<tr>
<td>Value 1 Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4 Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
</tr>
</table>
</div>
</body>
</html>

Why are you using a separate table for the values? You can have them in the same table.