none
ie 8 doesn't display table with large number of columns RRS feed

  • Question

  • When html table has about 1500 columns  ie does not  display it (in real application it's a quater splited into hours). When table has 100 rows ie 8 display normaly. In ff it works in both cases.Could anybody recomend me workaround to solve this prolem?

    Here is example of page markup:

    <html>
    <head>
        <title></title>
        <style type="text/css">
            table
            {
                max-width:1000px;
                width:1000px;
                table-layout:fixed;
                overflow:scroll;
                empty-cells:show;
            }
            td
            {
                width:20px;
                height:20px;
                border:solid 1px Black;
            }
        </style>
    </head>
    <body id="doc">
        <table>
            <colgroup>
                <col width="20px" style="width:20px; height:20px; min-width:20px; border:solid 1px Black;" />
            </colgroup>
            <tr>
                <td>           -aproximately 1500 times
                </td>
              ....

          </tr>

        </table>
    </body>
    </html>

    Friday, May 21, 2010 2:33 PM

Answers

  • Hi,

    Quirks mode does not recognize min-width.

    IE Quirks browsers have known issues with rounding errors and the box model.

    If the calculated column width is less than one pixel and you also have a 1px border then the adjusted column width will be negative.

    Try removing the table width restriction as well as the min-width rules.

    The usual design pattern is to place a table within a bounding <div> block and use the div's overflow rules to allow the table to scroll within the dimensions of the bounding div.

    Regards.


    Rob^_^
    Saturday, May 22, 2010 8:06 AM

All replies

  • Hi,

    Quirks mode does not recognize min-width.

    IE Quirks browsers have known issues with rounding errors and the box model.

    If the calculated column width is less than one pixel and you also have a 1px border then the adjusted column width will be negative.

    Try removing the table width restriction as well as the min-width rules.

    The usual design pattern is to place a table within a bounding <div> block and use the div's overflow rules to allow the table to scroll within the dimensions of the bounding div.

    Regards.


    Rob^_^
    Saturday, May 22, 2010 8:06 AM
  • Hi, IECUSTOMIZER.

    Thank you for reply. It is very  useful. Here is my second variant:

    <html>
    <head>
        <title></title>
        <style type="text/css">
            td div
            {
                width:20px;
                height:20px;
                border:solid 1px Black;
            }
        </style>
    </head>
    <body id="doc">
        <table>
            <tr>
                <td><div></div>
                </td>
              ....

          </tr>

        </table>
    </body>
    </html>

    It works without following declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml">.

    This declaration is on my asp.net  masterpage and it's not so easy to remove it from this page.  Can I change page html to keep DOCTYPE declaration? 

    Monday, May 24, 2010 8:10 PM
  • Hi,

    I also encountered the same problem. I try to put <div> html tag in between every table column <td><div>text</div></tr>.

    It works on the localhost with IE8. But when I deply to the server, it doesn't work.

    Any ideas??What is the workaround to solve this?

    Thanks in advance.

     

     

    Tuesday, September 28, 2010 1:56 AM
  • Validate your markup.

    You must be using a xhtml DTD. All non-self closing tags are required to have a matching closing tag.

    You rdevelopment and production servers have different MIME settings... compare them... probably you are using the xhtml file extension but not using the application/xhtml content-type header.

    Start your own thread next time and provide a link to your web site.


    Rob^_^
    Tuesday, September 28, 2010 3:07 AM
  • I am trying to get the example above to work. I am having the same issue on my site. Thanks, Greg 

     <!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" lang="en" xml:lang="en">
    <html>
    <head>
      <title></title>
      <style type="text/css">
        td div
        {
          width:20px;
          height:20px;
          border:solid 1px Black;
        }
      </style>
    </head>
    <body id="doc">
      <table>
        <tr>
          <td><div></div></td>
          <!-- over a thousand columns -->
       </tr>
    
      </table>
    </body>
    </html>
    
    <!--ANOTHER EXAMPLE-->
    
    <html>
      <head>
      </head>
      <body>
        <table>
          <tr>
            <td>&nbsp;</td>
          <!-- over a thousand columns -->
          </tr>
        </table>
      </body>
    </html>
    

    Wednesday, March 23, 2011 2:51 AM