5 Replies Latest reply: Jan 12, 2012 6:40 PM by socahweir RSS

    Scrollable table not working in IE

    socahweir Community Member

      I have a scrollable table that works great in Firefox, Safari, and Chrome. I cannot get it to work properly in IE. I think the problem is with the CSS, but I can't figure out what is wrong. Here's the CSS code:

       

       

      div.tableContainer {   clear: both;   border-right: 1px solid #CCC;   border-left: 1px solid #CCC;   border-bottom: 1px solid #CCC;   height: 285px;   overflow: auto;   width: 989px; } \html div.tableContainer{   padding: 0 16px 0 0;   width: 973px; } html>body div.tableContainer {   height: auto;   padding: 0; } head:first-child+body div[class].tableContainer {   height: 285px;   overflow: hidden;   width: 973px; } div.tableContainer table {   float: left;   width: 100%; } \html div.tableContainer table{   margin: 0 -16px 0 0; } html>body div.tableContainer table {   float: none;   margin: 0;   width: 973px } head:first-child+body div[class].tableContainer table {   width: 973px; } thead.fixedHeader tr {   position: relative;   top: expression(document.getElementById("tableContainer").scrollTop); } head:first-child+body thead[class].fixedHeader tr {   display: block; } thead.fixedHeader th {   background: #BC0001;   border-left: 1px solid #CCC;   border-right: 1px solid #CCC;   font-weight: normal;   padding: 4px 3px;   text-align: left;   font-size:12px;   line-height:normal;   color: #FFF; } thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {   color: #FFF;   display: block;   text-decoration: none;   width: 100%; } head:first-child+body tbody[class].scrollContent {   display: block;   height: 262px;   overflow: auto;   width: 100%; } tbody.scrollContent td, tbody.scrollContent tr.normalRow td {   background: #FFF;   height: 35px;   border-bottom: none;   border-left: none;   border-right: 1px solid #CCC;   border-top: 1px solid #DDD;   padding: 2px 3px 3px 4px;   font-family: Arial, Helvetica, sans-serif; } tbody.scrollContent tr.alternateRow td {   background: #EEE;   height: 35px;   border-bottom: none;   border-left: none;   border-right: 1px solid #CCC;   border-top: 1px solid #DDD;   padding: 2px 3px 3px 4px; }     

       

      Here's the HTML

       

                                                                                                                                                                                                                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                    
                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
               
                                 
                                       
        • 1. Re: Scrollable table not working in IE
          socahweir Community Member

          Sorry... html is:

           

           

           

          <table border="0" cellpadding="2" cellspacing="0" class="tableRed" width="974px">

                                          <tbody>

                                              <tr>

                                                  <td style="color:#FFF; border-right:1px solid #CCC; border-bottom: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;" width="110"> </td>

                                                  <td style="color:#FFF; border-right:1px solid #CCC;" width="71"> </td>

                                                  <td style="color:#FFF; border-right:1px solid #CCC;" width="69"> </td>

                                                  <td style="color:#FFF; border-right:1px solid #CCC; border-left:1px solid #CCC; border-bottom: 1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="280"> </td>

                                                  <td style="color:#FFF; border-right:1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="69"> 

                                                      </td>

                                                  <td style="color:#FFF; border-right:1px solid #CCC; border-bottom: 1px solid #CCC; text-align: center; font-family: Arial, Helvetica, sans-serif;" width="223"> </td>

                                              </tr>

                                          </tbody>

                                      </table>

                                      <div class="tableContainer" id="tableContainer">

                                          <table border="0" cellpadding="0" cellspacing="0" class="scrollTable" width="100%">

                                              <thead class="fixedHeader" id="fixedHeader">

                                                  <tr>

                                                      <th>

                                                           </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                          </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                          </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                           </th>

                                                      <th>

                                                           </th>

                                                  </tr>

                                              </thead>

                                              <tbody class="scrollContent">

                             

                                             <tr>

                                                      <td> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                  </tr>

                                             <tr>

                                                      <td> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                  </tr>

                                                  <tr>

                                                      <td> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                      <td align="center"> 

                                                    </td>

                                                  </tr>

                                              </tbody>

                                          </table>

                    </div>

                                      <div>

                                           </div>

          • 2. Re: Scrollable table not working in IE
            John Waller CommunityMVP

            Please upload the problem page to the web (anywhere) and post a link so we can view it in our browsers.

            • 3. Re: Scrollable table not working in IE
              socahweir Community Member

              I can't post a link because it is password protected. Here are two images of what the table looks like in IE and Firefox.

               

              This is what the table should look like. It works correctly in Firefox.

              Firefoxtable.png

              This is what the table looks like in IE

              table.png

              The CSS didn't come through correctly above. Here is the CSS:

               

              div.tableContainer {

                clear: both;

                border-right: 1px solid #CCC;

                border-left: 1px solid #CCC;

                border-bottom: 1px solid #CCC;

                height: 285px;

                overflow: auto;

                width: 989px;

              }

              \html div.tableContainer{

                padding: 0 16px 0 0;

                width: 973px;

              }

              html>body div.tableContainer {

                height: auto;

                padding: 0;

              }

              head:first-child+body div[class].tableContainer {

                height: 285px;

                overflow: hidden;

                width: 973px;

              }

              div.tableContainer table {

                float: left;

                width: 100%;

              }

              \html div.tableContainer table{

                margin: 0 -16px 0 0;

              }

              html>body div.tableContainer table {

                float: none;

                margin: 0;

                width: 973px

              }

              head:first-child+body div[class].tableContainer table {

                width: 973px;

              }

              thead.fixedHeader tr {

                position: relative;

                top: expression(document.getElementById("tableContainer").scrollTop);

              }

              head:first-child+body thead[class].fixedHeader tr {

                display: block;

              }

              thead.fixedHeader th {

                background: #BC0001;

                border-left: 1px solid #CCC;

                border-right: 1px solid #CCC;

                font-weight: normal;

                padding: 4px 3px;

                text-align: left;

                font-size:12px;

                line-height:normal;

                color: #FFF;

              }

              thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {

                color: #FFF;

                display: block;

                text-decoration: none;

                width: 100%;

              }

              head:first-child+body tbody[class].scrollContent {

                display: block;

                height: 262px;

                overflow-y: scroll;

                width: 100%;

              }

              tbody.scrollContent td, tbody.scrollContent tr.normalRow td {

                background: #FFF;

                height: 35px;

                border-bottom: none;

                border-left: none;

                border-right: 1px solid #CCC;

                border-top: 1px solid #DDD;

                padding: 2px 3px 3px 4px;

                font-family: Arial, Helvetica, sans-serif;

              }

              tbody.scrollContent tr.alternateRow td {

                background: #EEE;

                height: 35px;

                border-bottom: none;

                border-left: none;

                border-right: 1px solid #CCC;

                border-top: 1px solid #DDD;

                padding: 2px 3px 3px 4px;

              }

               

                </style>

              <!--[if IE]>

                  <style type="text/css">

                   tbody.scrollContent td, tbody.scrollContent tr.normalRow td tr.alternateRow td {

                   position: relative;

                          height: auto;

                         }

                  </style>

              <![endif]-->

              <style type="text/css">

              head:first-child+body thead[class].fixedHeader th {

                width: 129px;

              }

              head:first-child+body thead[class].fixedHeader th + th {

                width: 80px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th {

                width: 76px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th  {

                width: 76px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th + th  {

                width: 76px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th  + th  + th  {

                width: 69px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th  + th  + th  + th  {

                width: 75px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th  + th  + th  + th  + th {

                width: 80px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th  + th  + th  + th  + th  + th  + th {

                width: 75px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th + th  + th  + th  + th  + th  + th  + th  {

                width: 76px;

              }

              head:first-child+body thead[class].fixedHeader th + th + th  + th  + th  + th  + th  + th  + th  + th  + th {

                width: 93px;

              }

              head:first-child+body tbody[class].scrollContent td {

                width: 130px;

                height:35px;

              }

              head:first-child+body tbody[class].scrollContent td + td {

                width: 83px;

                height:35px;

              }

               

              head:first-child+body tbody[class].scrollContent td + td + td {

                width: 79px;

                height:35px;

              }

              </style>

              <!--[if IE]>

                  <style type="text/css">

                      tableContainer {

                          position: relative;

                          height: 285px;

                          width: 973px;

                          overflow-y: scroll;

                          overflow-x: hidden;

                          border: solid #CCC;

                          border-width: 0px 0px 1px 0px;

                      }

                      table {

                          border-width: 1px 1px 0px 0px;

                      }

                      thead tr {

                          position: absolute;

                          top: expression(this.offsetParent.scrollTop);

                      }

                        tbody {

                          height: auto;

                      }

                      table tbody tr:first-child td {

                          padding: 2px 3px 3px 4px;

                      }

                  </style>

              <![endif]-->

              • 4. Re: Scrollable table not working in IE
                Nancy O. CommunityMVP

                Vertical Scrolling Table (works in IE)

                http://alt-web.com/DEMOS/vertical-scrolling-table.shtml

                 

                 

                Nancy O.

                Alt-Web Design & Publishing

                Web | Graphics | Print | Media  Specialists 

                http://alt-web.com/


                • 5. Re: Scrollable table not working in IE
                  socahweir Community Member

                  Thank you Nancy! Your example was very helpful!