This is the table:
<table>
<tr>
<th>row1</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
...
</table>
I need to freeze row1 and scroll other rows. How can I do it?
Special for you https://jsfiddle.net/oLsghrt5/.
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
<div><input value="Table attribute name"></div>
</th>
<th>
<div><input value="Value"></div>
</th>
<th>
Description
<div><input value="Description"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
Css
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
Sample from duplicate:
Freeze the top row for an html table only (Fixed Table Header Scrolling)
You can fix the table head using bootstrap styling. An example of this is provided here.
You can add display: block to table and table rows.
And to freeze the first row, just mark position: sticky with top:0 to the first row and position: relative to the parent element.
Try running code snippet
table {
margin-top: 50px;
height: 50px;
overflow: auto;
display: block;
}
tbody {
position: relative
}
tbody tr {
display: block
}
tbody tr:first-child{
position: sticky;
top: 0;
background: white;
}
<table>
<tr>
<th>row1</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</table>
Related
The title is not clear, I know. Let me explain what I mean:
First column has td elements which have varying rowspans. What I want is to keep the td text in first column 'fixed' at the top while scrolling down.
But only as long as the rest of the td elements in the remaining columns are in scope.
Once all the rows (which the first column cell is spanning) is out of table view, the td element should scroll out of the view and the next td should now start fixing.
After Scrolling a bit:
And after All the animal rows are scrolled out, the fixed 'Animal' td would also go up and then 'Cars' would be fixed and then Hats would be fixed like this:
I got it working by setting
vertical-align: top; for the element
and created a div under the td element which contains the actual value for the cell
then applied position: sticky; top:0; z-index: 1; to the div.
Working fiddle: https://jsfiddle.net/ankitkraken/yw0jhzpu/1/
HTML:
<td class="td-class-name" rowspan="3">
<div class="level-1">
"Cars"
</div>
</td>
CSS:
.td-class-names{
vertical-align: top;
}
.level-1{
position: sticky ;
top: 80px;
z-index: -1;
}
I had to use top: 80px;, top:0; was putting the td contents BEHIND the sticky table header.
You can acheive this result with the sticky positioning:
thead tr:first-of-type {
position: sticky;
top: 0px;
z-index: 10;
}
thead tr:first-of-type th {
background: yellow;
}
th {
border: 1px solid;
padding: 6px;
}
td {
border: 1px solid;
padding: 6px;
}
th[rowspan]>.box {
vertical-align: top;
position: sticky;
top: 34px;
}
th[rowspan][data-order='first'] {
background: orange;
}
th[rowspan][data-order='second'] {
background: green;
}
th[rowspan][data-order='third'] {
background: indianred;
}
th[rowspan][data-order='fourth'] {
background: lightblue;
}
.main-container {
position: relative;
}
.table-container {
position: static;
max-height: 180px;
max-width: 350px;
;
overflow-y: scroll;
}
.fake {
width: 100%;
height: 100px;
}
<div class="main-container">
<div class='table-container'>
<table>
<thead>
<tr>
<th>CATEGORY</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr>
<th data-order='first' rowspan='5'>
<div class='box'>Animals</div>
</th>
<td>Dog</td>
<td>Bob</td>
</tr>
<tr>
<td>Dog</td>
<td>Flash</td>
</tr>
<tr>
<td>Cat</td>
<td>Mimi</td>
</tr>
<tr>
<td>Dog</td>
<td>Casper</td>
</tr>
<tr>
<td>Horse</td>
<td>Wind Lady</td>
</tr>
<tr>
<th data-order='second' rowspan='5'>
<div class='box'>Cars</div>
</th>
<td>Chrysler</td>
<td>Ann</td>
</tr>
<tr>
<td>Dodge</td>
<td>Christine</td>
</tr>
<tr>
<td>Ford</td>
<td>Foo</td>
</tr>
<tr>
<td>Ferrari</td>
<td>Dandy</td>
</tr>
<tr>
<td>Mercedes</td>
<td>A200</td>
</tr>
<tr>
<th data-order='third' rowspan='5'>
<div class='box'>Food</div>
</th>
<td>Apple</td>
<td>George</td>
</tr>
<tr>
<td>Banana</td>
<td>Rocco</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Liza</td>
</tr>
<tr>
<td>Ananas</td>
<td>Ted</td>
</tr>
<tr>
<td>Avocado</td>
<td>Gary</td>
</tr>
<tr>
<th data-order='fourth' rowspan='5'>
<div class='box'>Phones</div>
</th>
<td>Iphone XXI</td>
<td>ObiWan</td>
</tr>
<tr>
<td>Nokia 8110</td>
<td>Neo</td>
</tr>
<tr>
<td>Ericsson</td>
<td>Dr. Who</td>
</tr>
<tr>
<td>Huawei Mate 40</td>
<td>Dead or Alive</td>
</tr>
<tr>
<td>Xiaomi</td>
<td>Ping</td>
</tr>
</tbody>
</table>
<div class='fake'>
</div>
</div>
</div>
Sticky positioning is not always straightforward, expecially when dealing with overflow properties and display: table. Here are some useful resources about these topics:
Position: stuck; — and a way to fix it
CSS Position Sticky - How It Really Works!
Creating sliding effects using sticky positioning
Position Sticky on <td> with colspan?
I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.
Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).
Difference between fiddle link and my expected output
1. the text 'co1' and 'co2' is vertically aligned
2. the vertical text should be fixed like the first column is.
fiddle code
1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
2.CSS
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Here's the expected output
Something like this?
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
.text-container {
display: inline;
float: left;
width: 1rem;
}
.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}
<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.
Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>
i want to make a table header fix to one position and allow the remaining content of table to be scrollable(code below). I am using colspan and rowsapn property in the table header row . Is there any way to fix it ?
<html>
<body>
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
<tr class="tt" style="background-color:#C2C2C2;">
<td></td>
<td></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
<td><font color="black">Var</font></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
</tr>
<tr class="tt" style="background-color:#D7F2FF">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
//this is css
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
Question of 3 years old,however for those who still have no solution for this (table head with rowspan) I finally have the methode using js.
<div id="table">
<table>
<thead>
<!-- your head code -->
</thead>
<tbody>
<!-- your body code -->
</body>
</table>
</div>
CSS
#table{
height:200px; //for example
overflow-y:auto;
}
JS
let statusCard = document.querySelector('#table');
// add scroll event listener for change head's position
statusCard.addEventListener('scroll',e =>{
let tableHead = document.querySelector('thead');
let scrollTop = statusCard.scrollTop;
tableHead.style.transform = 'translateY(' + scrollTop + 'px)';
})
You might need to place your header in a div with a class .sticky or whatever you like and a proper CSS.
HTML
<div class="sticky">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
</table>
</div>
CSS
.sticky {
position: fixed;
top: 2px;
width: 96.5%;
}
See the example here: http://codepen.io/omerblink/pen/wMzLow?editors=110
You can use:
.mytable tr th
{
table-layout: fixed;
}
This may help you:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
I doubt you will be able to acheive this with a single table. So I have actually created two tables one for header and another for body & the former is always fixed. Also I assume that number of columns is static. Here is the code
<!--Header part-->
<div id="firsttable" style="width:100%;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<thead><tr class="tt " bgcolor="#0B2B62">
<th id="no">No.</th>
<th id="sto">Store Name</th>
<th id="res">Receipts</th>
<th colspan=2 id="rb">Receipts vs Budget</th>
<th colspan=3 id="rl">Receipts vs Last Year</th>
<th id="con">Contribution</th>
<th colspan=2 id="cb">Contribution vs Budget</th>
</tr>
</thead>
</table>
</div>
<!-- body part -->
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" style="background-color:#C2C2C2;">
<td headers="no">A</td>
<td headers="sto">B</td>
<td headers="res">C</td>
<td colspan="2" headers="rb"><div style="color:black">Var £</div><div style="color:black">Var %</div></td>
<td colspan="3"><div style="color:black">Var £</div><div>Var %</div><div>Var</div></td>
<td>D</td>
<td colspan="2"><div style ="color:black">Var £</div><div style="color:black">Var %</div></td>
</tr>
<!-- Include multiple tr to get scrollbar -->
</table>
</div>
CSS
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
td,th{
max-width:10px;
}
.mytable div{
max-width:40%;
display:inline
}
WORKING COPY
NOTE:When this scrollbar is visible you may see that the header columns is not in sync with body columns. This is because scroll bar has a width and it is will occupy some space.In this case you can adjust the width of any body column so that it is in sync. Also I understand basically you need 7 columns there can be subcolumns. So in body I have created 7 columns and div to replicate the sub columns
Hope this will be helpful