0

I have this working in every browser except Internet Explorer! I don't know why this is happening, and any information you can provide would be awesome! Check below for my code and what I've tried. This little web app is for a hotel I'm helping. You'll notice in my CSS, the tbody has overflow:auto and that works in Chrome, Firefox, but not IE...

Here is my code:

CSS

tr, td, label{
    font-family: arial, verdana, sans-serif;
    text-align: center;
}
th{
    font-weight: bold;
    background-color: #380040;
    text-align: center;
    padding:20px 0;
    color: #fff;
    border-radius: 5px;
}
tr{
    height: 20px;
}
td{
    background-color: #444;
    text-align: center;
    color: #fff;
    width: 180px;
    padding: 10px;
}
thead{
    display:block;
    position: relative;
}
tbody{
    height: 500px;
    overflow: auto;
    display: block;
}

HTML

 <table>
            <thead>
                <tr> 
                    <th width="188px">Room Number: </th>
                    <th width="193px">Room Charges:</th>
                    <th width="193px">Adult: </th>
                    <th width="212px">Status: </th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($output['data']['rooms'] as $info): ?>
                    <tr>
                        <td><?php echo $info['room_number']; ?></td>
                        <?php $services = reset($info['services']); ?>
                        <td><?php echo ($services['room_charges']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td>
                        <td><?php echo ($services['adult']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td>                
                        <td><?php echo $info['status']; ?></td>
                    </tr>
                    </body>
                <?php endforeach; ?>
            </tbody>
        </table>

I'm actually building a dynamic table, but this question will still apply to the actual table. I've tried adding position:relative to th but that didn't work either. Any information would be great if you can point me in the right direction?

JSFIDDLE: http://jsfiddle.net/0aqmb2mq/

Or Assayag
  • 5,662
  • 13
  • 57
  • 93
ValleyDigital
  • 1,460
  • 4
  • 21
  • 37
  • *that works in Chrome, Firefox, but not IE...* - Oh yes, one of the greatest questions in life.... – LcSalazar Oct 07 '14 at 21:27
  • haha... I hate IE so much right now. – ValleyDigital Oct 07 '14 at 21:29
  • You should provide an example of an HTML document, not dump the content of a .php file. That is, you should show a sample document *as received by a browser*. And a jsfiddle would be nice. – Jukka K. Korpela Oct 07 '14 at 21:30
  • @JukkaK.Korpela I updated question with a JS fiddle. In the fiddle you can see the scroll bar within the table. This is not present in IE, and just displays all the information within the table. – ValleyDigital Oct 07 '14 at 21:41
  • 1
    possible duplicate of [Table tbody scroll in IE8](http://stackoverflow.com/questions/16984323/table-tbody-scroll-in-ie8) – Steve H. Oct 07 '14 at 22:08
  • 1
    In which way it “doesn’t work” in which IE versions? I don’t see much difference between IE 11 and Firefox here. In a sufficiently wide window, the appearance looks tabular, in a narrow window the column structure breaks: the header cell widths differ from the corresponding data cell widths. – Jukka K. Korpela Oct 08 '14 at 04:58

0 Answers0