Results 1 to 2 of 2

Thread: Table scrollable in Firefox and chrome but not in Internet Explorer

  1. #1
    Join Date
    May 2012

    Table scrollable in Firefox and chrome but not in Internet Explorer

    Hi ,

    I am attaching a file 'table_scroll.html'.

    The table in that file under the heading 'Here goes the scrollable table' is functioning as expected in
    Firefox (version 22.0) and chrome (Version 36.0.1985.143 m). But in Internet Explorer (version 10.0)
    the table scrollbar is not appearing and also it is showing only one row of data.

    Please help me to make it work for all the browsers.

    I am referring the code from this below link

    Attached Files Attached Files

  2. #2
    Join Date
    Feb 2008
    Amsterdam, The Netherlands
    The Javascript in your linked page only colors the rows alternately. I don't know exactly why the scrollable effect doesn't work in IE10 (or 9, in which it doesn't work either), and I'm afraid I don't have time to analyze it. But if that would help you, here is a code that does, even in IE8 (live demo):

    HTML Code:
    <!DOCTYPE html>
        <meta charset="utf-8">
        <title>Scrollabe table by Frank</title>
    <!-- Simplified and improved version of the table on
    http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html -->
    if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
        document.documentElement.className += ' touchScreen';
    /* BASICS: */
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box; /* in case block elements are used inside table cells */
    html {
        font-size: 62.5%; /* standardizes older IEs */
    body {
        font: normal 1.3em Verdana; /* = 13px */
    table {
        border-collapse: collapse;
        table-layout: fixed;
        empty-cells: show;
    td {
        border: 1px solid black;
        padding: 4px;
    div#scrollTableContainer {
        width: 617px;
        margin: 40px; /* just for presentation purposes */
        border: 1px solid black;
    .touchScreen div#scrollTableContainer {
        width: 600px; /* touch devices do not form scrollbars (= 17 px wide) */
    #tHeadContainer {
        background: #8B0000;
        color: white;
        font-weight: bold;
    #tBodyContainer {
        height: 240px;
        overflow-y: scroll;
    .touchScreen #tBodyContainer {
        -webkit-overflow-scrolling: touch; /* smooths scrolling on touch screens */
    tr:first-child td {
        border-top: none;
    #tBody tr.lastRow td {
        border-bottom: none;
    td:first-child {
        min-width: 108px; /* Firefox needs min- and max-widths */
        max-width: 108px;
        border-left: none;
    td:first-child + td {
        min-width: 125px;
        max-width: 125px;
    td:first-child + td + td {
        min-width: 90px;
        max-width: 90px;
    td:first-child + td + td + td {
        min-width: 95px;
        max-width: 95px;
    td:first-child + td + td + td + td {
        width: 180px; /* here, Firefox messes up with min- and max-widths */
        border-right: none;
    /* IE8 last-child: border-right: expression(this.nextSibling==null?'none':'inherit'); */
    p#touchDeviceText {
        display: none;
    .touchScreen p#touchDeviceText {
        display: block;
    <p id="touchDeviceText">This table is scrollable</p>
    <div id="scrollTableContainer">
    	<div id="tHeadContainer">
    		<table id="tHead">
    				<td>Began operation</td>
    	</div><!-- tHeadContainer -->
    	<div id="tBodyContainer">
    		<table id="tBody">
    				<td>Seabourne Sun</td>
    				<td>Seabourn Cruise Line</td>
    				<td>Ended service in 2002, currently operating as Prinsendam</td>
    				<td>Adventures of the Seas</td>
    				<td>Royal Caribbean International</td>
    				<td>Oceanic Independence</td>
    				<td>American Hawaiian Cruises / American Global Line</td>
    				<td>Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td>
    				<td>Cunard Ambassador</td>
    				<td>Cunard Line</td>
    				<td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
    				<td>Aegean Beauty</td>
    				<td>Voyages to Antiquity</td>
    				<td>Formerly Aegean Dolphin and Aegean I. Operating</td>
    				<td>Serenade of the Seas</td>
    				<td>Royal Caribbean International</td>
    				<td>Queen Elizabeth 2</td>
    				<td>Cunard Line</td>
    				<td>Left fleet in November 2008</td>
    				<td>National Geographic Endeavour</td>
    				<td>Lindblad Expeditions</td>
    				<td>Operating, also known as Endeavour</td>
    			<tr class="lastRow">
    				<td>Liberty of the Seas</td>
    				<td>Royal Caribbean International</td>
    	</div><!-- tBodyContainer -->
    </div><!-- scrollTableContainer -->
    Last edited by Frank62; 08-27-2014 at 05:59 PM.
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles