Search code examples
htmlinternet-explorerhtml-tableopera

Table showed different in IE from Opera


I have a table with a code like this:

<table cellpadding="6" rules="groups"  frame="no">
<thead>
<tr><th>Date</th><th>Length</th><th>Time</th></tr>
</thead>

<tbody>
<tr><td>31. January1</td><td>28 km</td><td>3 hours</tr> 
</tbody></table>

The problem is that in IE the table has frame and a tableborder = 1. What to do?


Solution

  • Try this:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Example:Table with Header Underline Border</title>
        <style type="text/css">
            table.groups
            {
                border-collapse: collapse;
            }
    
            table.groups thead th
            {
                border-bottom: solid 1px black;
            }
    
            table.groups th,
            table.groups td
            {
                padding: 6px;
            }
        </style>
    </head>
    <body>
        <table class="groups">
            <thead>
                <tr><th>Date</th><th>Length</th><th>Time</th></tr>
            </thead>
            <tbody>
                <tr><td>31. January1</td><td>28 km</td><td>3 hours</td></tr>
            </tbody>
        </table>
    </body>
    </html>
    


    A couple of specific things to note:

    • Using a DOCTYPE to prevent quirks mode.
      (this is the HTML5 DOCTYPE - some people prefer the more wordy XHTML or HTML4 Strict ones - those also work)
    • No unnecessary attributes on the tags - all controlled by tag names and classes.