49 users online (1 members and 48 guests)  


  Results 1 to 3 of 3

Related

  1. Why some <td> don't show inside a table?    Forum: HTML Forum
    Replies: 11
  2. Scrool bar inside table    Forum: HTML Forum
    Replies: 0
  3. table with exact width problem...    Forum: HTML Forum
    Replies: 4
  4. Width of rows in table.    Forum: CSS Forum
    Replies: 1
  1. #1
    Migrate's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2004
    Posts
    1

    Question Error in IE6 with 100% width Table inside a div

    Good afternoon!
    I'm trying to create a table inside a div that so it occupies all div width and scrolls vertically when it's height is greater than the div's height. This work fine in Mozilla Firefox but in IE6 a horizontal scroll appears and the table width is larger than the div's width.

    To ilustrate better what my problem is I will attach what I see in IE6.
    As you can see in the attached file an extra horizontal toolbar appears although I set table width to 100%.

    Can anyone help me?

    Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    <title>Table</title>
    <style>
    
    * {
    margin: 0px;
    padding: 0px;
    }
    
    html,body {
    
    width: 100%;
    height: 100%;
    
    }
    #left {
    
    width: 200px;
    height: 300px;
    float: left;
    border: 1px dashed Black;
    }
    
    #center {
    
    width: 500px;
    height: 300px;
    float: left;
    overflow: auto;
    }
    
    #center table {
    width: 100%;
    }
    
    </style>
    </head>
    <body>
    
    <div id="left">
    <br>
    <br>
    <h3>Navigation</h3>
    <br>
    <br>
    <br>
    </div>
    
    <div id="center">
    
    <table>
    <thead><th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th><th>H6</th><th>H7</th></thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    </tbody>
    </table>
    
    </div>
    
    </body>
    </html>

    Thanks in advance,
    Migrate

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Migrate,

    try changing this rule in the css...
    Code:
    #center table {
         width: 100%;
     }
    ...to ...
    Code:
    #center table {
         width:484px;
         text-align:center;
    }
    ...this allows for 16px of vertical scrollbar which upsets I.E.
    I also popped text-align:center in to tidy up the columns

    coothead

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    ...p.s. I just noticed that your DOCTYPE is html 1.0 strict.

    As it stands it will not validate.

    so tryy it like this...
    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>
    <title>Table</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    * {
         margin: 0px;
         padding: 0px;
     }
    
    html,body {
         width: 100%;
         height: 100%;
     }
    
    #left {
         width: 200px;
         height: 300px;
         float: left;
         border: 1px dashed #000;
     }
    
    #center {
         width: 500px;
         height: 300px;
         float: left;
         overflow: auto;
     }
    
    #center table {
         width:484px;
         text-align:center;
     }
    h3 {
         margin:40px 0px 0px 10px;
     }
    
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="left">
    <h3>Navigation</h3>
    </div>
    
    <div id="center">
    
    <table>
    <thead><tr>
    <th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th><th>H6</th><th>H7</th>
    </tr></thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
    </tbody>
    </table>
    
    </div>
    
    </body>
    </html>
    ...the items in red are the modifications for validation, the item in green replaces the <br>'s used for positioning.

    coothead



Tags for this Thread