I had to set the min-width for chrome.
I have always had an issue with scrollable tables.
I have posted my solution below.
Here was my criteria.
1) Don't define or set the column width.
2) Set the tbody max height via css selector.
3) Shrink the tbody.
4) Use unobtrusive Javascript. Basically set a css class --> scrollable. I managed to almost solve this. I used a wrapper table/div.
5) Get it work for, IE7, IE8, chrome, safari, opera and firefox.
I would love to hear any feedback on improvements.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>scroll</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link href="css/tablescroll.css" rel="stylesheet" type="text/css"/>
<!--[if IE]>
<link href="css/tablescroll-ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<script type="text/javascript" src="js/tablescroll.js"></script>
</head>
<body>
<table class="scrollable"><tr><td><div>
<table border="1">
<thead style="background-color:white">
<tr>
<th style="text-align:left">One</th>
<th style="text-align:left">Two</th>
<th class="scrollCol"></th>
</tr>
</thead>
<tbody style="height:100px">
<tr><td>Data</td><td><span style="white-space:nowrap">Dasdfsdfssdfssssssssssssssssssssssssssssssssfsdffffff ffffffffffffsdfsdfsdfdstasdffffffffffffffffffffffff</span></td></tr>
<tr><td>Data</td><td><input type="text" size="100"/></td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</div></td></tr></table>
</body>
</html>
css/tablescroll.css
Code:
/* set the tbody height for mozilla */
html>body table.scrollable tbody {
overflow: auto;
}
/* set scrollbar column for mozilla */
table.scrollable th.scrollCol {
display: block;
width: 16px;
min-width: 16px;
padding: 0;
margin: 0;
}
css/tablescroll-ie.css
Code:
/* for ie set the tbody height */
table.scrollable div {
height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= parseInt(this.getElementsByTagName('TBODY')[0].style.height) && parseInt(this.getElementsByTagName('TBODY')[0].style.height) > 0 ? this.getElementsByTagName('TBODY')[0].style.height : "auto" );
overflow-y: auto;
}
/* for ie set the table row height */
table.scrollable table tr {
height: auto;
}
/* for ie set the table header position */
table.scrollable thead tr {
position: relative;
/* set the header for IE header (jumping header bug) */
top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}
/* reset for ie */
table.scrollable th.scrollCol {
display: none;
}
js/tablescroll.js
Code:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_safari = /WebKit/i.test(navigator.userAgent);
var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
tablescroll = {
makeScrollable: function(table) {
var tbody = table.getElementsByTagName('tbody')[0];
var thead = table.getElementsByTagName('thead')[0];
var headrow = thead.rows[0].cells;
for (var i=0; i<headrow.length; ++i) {
var currentMax = headrow[i].offsetWidth;
for (var j=0; j<tbody.rows.length; ++j) {
if(i < tbody.rows[j].cells.length ){
var currentCell = tbody.rows[j].cells[i];
if( currentCell.offsetWidth > currentMax ){
currentMax = currentCell.offsetWidth;
}
}
}
headrow[i].style.width = (currentMax + "px");
headrow[i].style.minWidth = (currentMax + "px");
for (var j=0; j<tbody.rows.length; ++j) {
if(i < tbody.rows[j].cells.length ){
tbody.rows[j].cells[i].style.width = (currentMax + "px");
tbody.rows[j].cells[i].style.minWidth = (currentMax + "px");
}
}
}
tbody.style.display='block';
tbody.style.overflowY='auto';
thead.style.display='block';
},
init: function(reinit) {
// quit if this function has already been called
if (reinit == true); // do nothing
else if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
if (!document.createElement || !document.getElementsByTagName) return;
var tables = document.getElementsByTagName('table');
if (tables) for (i=0;i<tables.length;++i) {
var table = tables[i];
if (table.className.search(/\bscrollable\b/) != -1) {
var innerTable = table.getElementsByTagName('table')[0];
var tbody = innerTable.getElementsByTagName('tbody')[0];
// it is the second tbody
if( parseInt(tbody.style.height) >= tbody.scrollHeight ) tbody.style.height="auto";
else if(is_chrome || is_safari || is_opera) tablescroll.makeScrollable(innerTable);
}
}
},
reinit: function() {
tablescroll.init(true);
}
}
/* for Mozilla/Opera9/chrome */
if (window.addEventListener) {
window.addEventListener("load", tablescroll.init, false);
}
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
tablescroll.init(); // call the onload handler
}
}, 10);
}
table cell padding values for chrome
Reply With Quote
Bookmarks