www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    May 2012
    Posts
    38

    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
    http://www.imaputz.com/cssStuff/bigFourVersion.html#

    Thanks.
    Attached Files Attached Files

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    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>
    <html>
        <head>
        <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 -->
    <script>
    if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
        document.documentElement.className += ' touchScreen';
    }
    </script>
    
    <style>
    /* 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;
    }
    
    
    /* SCROLL TABLE ESSENTIALS (+ SOME ADDITIONAL CSS): */
    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 */
    }
    
    
    /* FINER LAYOUT MATTERS: */
    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'); */
    
    /* AND SOME CSS TO INFORM TOUCH SCREEN USERS: */
    p#touchDeviceText {
        display: none;
    }
    .touchScreen p#touchDeviceText {
        display: block;
    }
    </style>
    </head>
    <body>
    <p id="touchDeviceText">This table is scrollable</p>
    <div id="scrollTableContainer">
    	<div id="tHeadContainer">
    		<table id="tHead">
    			<tr>
    				<td>Name</td>
    				<td>Operator</td>
    				<td>Began operation</td>
    				<td>Tonnage</td>
    				<td>Status</td>
    			</tr>
    		</table>
    	</div><!-- tHeadContainer -->
    	<div id="tBodyContainer">
    		<table id="tBody">
    			<tr>
    				<td>Seabourne Sun</td>
    				<td>Seabourn Cruise Line</td>
    				<td>1988</td>
    				<td>?</td>
    				<td>Ended service in 2002, currently operating as Prinsendam</td>
    			</tr>
    			<tr>
    				<td>Adventures of the Seas</td>
    				<td>Royal Caribbean International</td>
    				<td>2001</td>
    				<td>138,000</td>
    				<td>Operating</td>
    			</tr>
    			<tr>
    				<td>Oceanic Independence</td>
    				<td>American Hawaiian Cruises / American Global Line</td>
    				<td>1974</td>
    				<td>23,719</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>
    			</tr>
    			<tr>
    				<td>Cunard Ambassador</td>
    				<td>Cunard Line</td>
    				<td>1972</td>
    				<td>14,160</td>
    				<td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
    			</tr>
    			<tr>
    				<td>Aegean Beauty</td>
    				<td>Voyages to Antiquity</td>
    				<td>1973</td>
    				<td>11,563</td>
    				<td>Formerly Aegean Dolphin and Aegean I. Operating</td>
    			</tr>
    			<tr>
    				<td>Serenade of the Seas</td>
    				<td>Royal Caribbean International</td>
    				<td>2003</td>
    				<td>90,090</td>
    				<td>Operating</td>
    			</tr>
    			<tr>
    				<td>Queen Elizabeth 2</td>
    				<td>Cunard Line</td>
    				<td>1969</td>
    				<td>70,327</td>
    				<td>Left fleet in November 2008</td>
    			</tr>
    			<tr>
    				<td>National Geographic Endeavour</td>
    				<td>Lindblad Expeditions</td>
    				<td>1996</td>
    				<td></td>
    				<td>Operating, also known as Endeavour</td>
    			</tr>
    			<tr class="lastRow">
    				<td>Liberty of the Seas</td>
    				<td>Royal Caribbean International</td>
    				<td>2007</td>
    				<td>154,407</td>
    				<td>Operating</td>
    			</tr>
    		</table>
    	</div><!-- tBodyContainer -->
    </div><!-- scrollTableContainer -->
    </body>
    </html>
    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