<tbody> not working in IE

Hey all.

I have a table with <tbody> defined as:

tbody
{
border: red solid thin;
height: 350px;
overflow: scroll;
overflow-x: hidden;
}

In FF, I can see the border and it sets the height. In IE, the height is not set and the border is not red. How do I get IE to recognize the <tbody> tag?

Using IE7 with strict doctype.

Well, I just put the table into a container and that solved it.

overflow-x: hidden;

Thats CSS3. I dont recommend using that just quite yet.

border: red solid thin;

Lol, waaaa?

border:1px solid #ff0000;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>

#container {
    border:1px solid #ff0000;
    height:350px;
    overflow:scroll;
    width:200px;
    margin:0 auto;
}



</style>
</head>
<body>
<div id="container">
    <p>Duis ut arcu volutpat sem ultricies convallis! Nulla viverra elit id erat. Duis id orci et tortor adipiscing auctor. Quisque massa sem, laoreet in, pretium non, ultrices sit amet, purus. Aenean iaculis tincidunt nulla. Integer placerat magna in erat? Mauris tristique bibendum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam feugiat malesuada dolor. Aliquam erat volutpat. Sed mattis faucibus ligula. Proin at eros vitae enim semper fringilla. Pellentesque purus magna, sollicitudin ut, semper in, pharetra et, purus. Ut sit amet turpis in odio vulputate lacinia. Aenean viverra; justo non faucibus varius, arcu nisl sodales urna, nec ullamcorper nisl lacus eget nisi. Nulla viverra nulla et nulla. Quisque sollicitudin ipsum at orci.
</p>    

</div>
</body>
</html>

Giver a width :wink:

The table headers in IE overlap the scroll bar, can that be corrected with the thead?

overflow-x is indeed CSS 3, but why not just give overflow:hidden;?

PS:Most browsers support that so…

Do you have a link to look at? I fnid it easier to debug with one ;).

To my knowledge, the Gecko based browsers are the only browsers to support tbody styles in general. In the posted test case, notice the space between the cells; it should be pink if tbody’s background were applied. Instead, it appears the background color is applied to the cells, in all but the Gecko family, e.g. Firefox et al.

None of the non-Gecko browsers apply the height property to the tbody, and IE appears to apply it to tr, instead. Uncomment the tr height property for the fix. (This appears to be fixed in IE8.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title>scrolling table</title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="editor"
        content="Emacs 22" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
  table {
    background-color: lightblue;
    width: 500px;
    border: 1px solid black;
    }

  tbody {
    background-color: pink;
    height: 100px;
    overflow: auto;
    overflow-x: hidden;
    }

  tr {
    /* height: auto; */
    }

  th, td {
    border: 1px solid black;
    }

  /*]]>*/
  </style>
</head>

<body>
  <table summary="">
    <thead>
      <tr>
        <th>header 1</th>

        <th>header 2</th>

        <th>header 3</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>header 1</th>

        <th>header 2</th>

        <th>header 3</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>r1 c1</td>

        <td>r1 c2</td>

        <td>r1 c3 x x x x x x x x x x x</td>
      </tr>

      <tr>
        <td>r2</td>

        <td>r2</td>

        <td>r2</td>
      </tr>

      <tr>
        <td>r3</td>

        <td>r3</td>

        <td>r3</td>
      </tr>

      <tr>
        <td>r4</td>

        <td>r4</td>

        <td>r4</td>
      </tr>

      <tr>
        <td>r5</td>

        <td>r5</td>

        <td>r5</td>
      </tr>

      <tr>
        <td>r6</td>

        <td>r6</td>

        <td>r6</td>
      </tr>

      <tr>
        <td>r7</td>

        <td>r7</td>

        <td>r7</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

cheers,

gary

is IE8 solid? Last time I tried it there were many issues. This app is run locally to our company so forcing a particular browser is easier than it would be if it were usable by the public.

IE8 is no better than Opera or Safari on this. In order to have a scrolling tbody while keeping columnar integrity with the thead and tfoot rows, and them not scrolling, you’re limited to Firefox. Putting the entire table in a fixed height div will work, but you lose the thead and tfoot as they scroll out of sight. Your choice. :wink:

cheers,

gary