Table cells get hidden when total width is more than 100%

Question

I have a HTML table as given in the following code. This has 16 columns. I am setting the cell width using javascript. When the total width is less than 100%, it is working fine.

When the total width exceeds 100%, I want to display a horizontal scroll bar. But when I changed the width of the yellow highlighted cell from 5% to 30%, all the remaining cells get hidden instead of appearance of a scroll bar.

QUESTIONS:

1. Why the scrollbar is not appearing at present ?
2. How can we make it to work appropriately by showing scroll bar? (Also the two columns after the yellow column should visible; not hidden)

Note: The issue is noted in IE8.

Note: Refer http://jsfiddle.net/Lijo/dYSfN/2/ for code. This does not show the issue. For visualizing the issue, please copy the code into a html file and open using IE8

UPDATE

While hiding a column, remaining columns width automatically adjusts to table width in Firefox and Chrome but not in IE8. In IE8 the table width shrinks.

http://srikanthgade.blogspot.in/2010/09/ie8-standards-table-layout-fixed.html#!/2010/09/ie8-standards-table-layout-fixed.html

Issue Details

When Yellow Highlighted Cell Width is 5%

When Yellow Highlighted Cell Width is 30%

STYLE

   .gridTableBorder    {         overflow:scroll;         border: 2px solid green;    }      /*GridView Tables*/     .resultGridTable     {         table-layout: fixed; /*Needed along with word wrap */     }      .resultGridTable th     {         background-color: #A7A7A6;         color: #ffffff;         padding: 2px 5px 2px 5px;         font: bold 9pt Arial;         border: 1px solid red;         word-wrap: break-word;     }      .resultGridTable td     {         padding: 0px 5px 0px 5px;         font: normal 9pt Arial;         word-wrap: break-word;         border: 1px solid blue;     } 

JAVASCRIPT

    $(document).ready(function () {           //Width Setting         var numberOfColumns = 16;         $('.resultGridTable th, .resultGridTable td').each(function (i) {               if (i % numberOfColumns == 0) {                 $(this).css('width', '1%');             }              if (i % numberOfColumns == 1) {                 $(this).css('width', '10%');             }              if (i % numberOfColumns == 2) {                 $(this).css('width', '9%');              }              if (i % numberOfColumns == 3) {                 $(this).css('width', '8%');                 $(this).css('background-color', 'orange');             }              if (i % numberOfColumns == 4) {                 $(this).css('width', '6%');             }             if (i % numberOfColumns == 5) {                 $(this).css('width', '8%');             }             if (i % numberOfColumns == 6) {                 $(this).css('width', '5%');             }             if (i % numberOfColumns == 7) {                 $(this).css('width', '5%');             }             if (i % numberOfColumns == 8) {                 $(this).css('width', '5%');             }              ///             if (i % numberOfColumns == 9) {                 $(this).css('width', '7%');             }             if (i % numberOfColumns == 10) {                 $(this).css('width', '8%');                 $(this).css('background-color', 'orange');             }              if (i % numberOfColumns == 11) {                 $(this).css('width', '5%');             }             if (i % numberOfColumns == 12) {                 $(this).css('width', '5%');             }              if (i % numberOfColumns == 13) {                 $(this).css('width', '30%');                 $(this).css('background-color', 'Yellow');             }              if (i % numberOfColumns == 14) {                 $(this).css('width', '7%');             }              if (i % numberOfColumns == 15) {                 $(this).css('width', '7%');             }          }         );           //Hide Is Summary Row Column         var selectedElements = $("tr").find("th:first, td:first");         $(selectedElements).hide();       }     ); 

HTML

<body> <form method="post" action="LocalTaxReport.aspx" id="form1"> <div id="wrapper">     <div id="container">         <div id="centralContainer">             <div id="mainContainer">                 <div id="contentHolderDiv" class="contentHolderDiv">                     <div id="resultContainer" class="resultContainerDiv">                         <div id="gridDiv" class="gridTableBorder">                             <div>                                 <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"                                     style="border-collapse: collapse;">                                     <tr>                                         <th scope="col">                                             IsSummaryRow                                         </th>                                         <th scope="col">                                             Associate                                         </th>                                         <th scope="col">                                             My Amount                                         </th>                                         <th scope="col">                                             Federal Withholding                                         </th>                                         <th scope="col">                                             Social Security                                         </th>                                         <th scope="col">                                             Medicaring                                         </th>                                         <th scope="col">                                             State Tax                                         </th>                                         <th scope="col">                                             County Tax                                         </th>                                         <th scope="col">                                             City Tax                                         </th>                                         <th scope="col">                                             Total                                         </th>                                         <th scope="col">                                             State                                         </th>                                         <th scope="col">                                             State Code                                         </th>                                         <th scope="col">                                             County                                         </th>                                         <th scope="col">                                             County Code                                         </th>                                         <th scope="col">                                             City                                         </th>                                         <th scope="col">                                             City Code                                         </th>                                     </tr>                                     <tr>                                         <td>                                             False                                         </td>                                         <td>                                             Mary Dryden                                         </td>                                         <td>                                             $3450                                         </td>                                         <td>                                             $32                                         </td>                                         <td>                                             $5                                         </td>                                         <td>                                             $2                                         </td>                                         <td>                                             $10                                         </td>                                         <td>                                             $1                                         </td>                                         <td>                                             $2                                         </td>                                         <td>                                             $3400                                         </td>                                         <td>                                             Arkansas                                         </td>                                         <td>                                             AR                                         </td>                                         <td>                                             Benton                                         </td>                                         <td>                                             04567                                         </td>                                         <td>                                             Bentonville                                         </td>                                         <td>                                             23156                                         </td>                                     </tr>                                 </table>                             </div>                         </div>                     </div>                     <div class="clear">                     </div>                 </div>             </div>             <div class="clear">             </div>         </div>     </div> </div> </form>   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>  </body> 

Answer 1

I tried to achieve the desired effect you had with few modification and I am going to describe it here.

1. You need to set the doctype. A DOCTYPE Declaration is mandatory for most current markup languages and without one it is impossible to reliably validate a document or determine what rules to apply.

2. You are not seeing the scroll bars because the width of table is not set. The div by default takes 100%. Now set the overflow property to the div and then set the width of the table to 120% (that exceeds the div's 100%) to see the scroll bars.

3. Table width of 120% doesn't mean you can sum of all column width to 120. Since the table-layout:fixed, You need to tally sum of all columns width to 100 even if you set the table width as 120%.

4. In you code you were setting the width of all columns and rows, instead apply width only to th or the first row which will apply with to all columns in all rows (entire table).

5. Modified your code from using if..if..if to use if..else if..else if

Note: 4 and 5 are improvements from the existing code.

DEMO: http://jsfiddle.net/FP7MF/2/embedded/result/

Full Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1">     <title>My Report </title>     <style type="text/css">          /*GridView Tables*/         .resultGridTable         {             table-layout: fixed;              width: 130%;         }          .resultGridTable th         {             background-color: #A7A7A6;             color: #ffffff;             padding: 2px 5px 2px 5px;             font: bold 9pt Arial;             border: 1px solid red;             word-wrap: break-word;         }          .resultGridTable td         {             padding: 0px 5px 0px 5px;             font: normal 9pt Arial;             word-wrap: break-word;             border: 1px solid blue;         }          #gridDiv div { overflow: auto;  }      </style> </head> <body>     <form>         <div id="wrapper">             <div id="container">                 <div id="centralContainer">                     <div id="mainContainer">                         <div id="contentHolderDiv" class="contentHolderDiv">                             <div id="resultContainer" class="resultContainerDiv">                                 <div id="gridDiv" class="gridTableBorder">                                     <div>                                         <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"                                              style="border-collapse: collapse;">                                            <tr>                                               <th scope="col">IsSummaryRow</th>                                               <th scope="col">Associate</th>                                               <th scope="col">My Amount</th>                                               <th scope="col">Federal Withholding</th>                                               <th scope="col">Social Security</th>                                               <th scope="col">Medicaring</th>                                               <th scope="col">State Tax</th>                                               <th scope="col">County Tax</th>                                               <th scope="col">City Tax</th>                                               <th scope="col">Total</th>                                               <th scope="col">State</th>                                               <th scope="col">State Code</th>                                               <th scope="col">County</th>                                               <th scope="col">County Code</th>                                               <th scope="col">City</th>                                               <th scope="col">City Code</th>                                            </tr>                                            <tr>                                                <td>False</td>                                                <td>Mary Dryden</td>                                                <td>$3450</td>                                                <td>$32</td>                                                <td>$5</td>                                                <td>$2</td>                                                <td>$10</td>                                                <td>$1</td>                                                <td>$2</td>                                                <td>$3400</td>                                                <td>Arkansas</td>                                                <td>AR</td>                                                <td>Benton</td>                                                <td>04567</td>                                                <td>Bentonville</td>                                                <td>23156</td>                                             </tr>                                         </table>                                     </div>                                 </div>                             </div>                             <div class="clear"></div>                         </div>                     </div>                     <div class="clear"></div>                </div>             </div>         </div>     </form>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>      <script type="text/javascript">           $(document).ready(function () {               //Width Setting             var numberOfColumns = 16;             $('.resultGridTable th').each(function (i) {                  if (i % numberOfColumns == 0) {                     $(this).css('width', '1%');                 } else if (i % numberOfColumns == 1) {                     $(this).css('width', '10%');                 } else if (i % numberOfColumns == 2) {                     $(this).css('width', '9%');                 } else if (i % numberOfColumns == 3) {                     $(this).css({'width': '8%', 'background-color': 'orange'});                 } else if (i % numberOfColumns == 4) {                     $(this).css('width', '6%');                 } else if (i % numberOfColumns == 5) {                     $(this).css('width', '8%');                 } else if (i % numberOfColumns == 6) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 7) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 8) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 9) {                     $(this).css('width', '7%');                 } else if (i % numberOfColumns == 10) {                     $(this).css({'width': '8%', 'background-color': 'orange'});                 } else if (i % numberOfColumns == 11) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 12) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 13) {                     $(this).css({'width': '8%', 'background-color': 'Yellow'});                 } else if (i % numberOfColumns == 14) {                     $(this).css('width', '5%');                 } else if (i % numberOfColumns == 15) {                     $(this).css('width', '5%');                 }              });              //Hide Is Summary Row Column             var selectedElements = $("tr").find("th:first, td:first");             $(selectedElements).hide();         });      </script> </body> </html>