asvela asvela - 2 months ago 12
HTML Question

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?

Answer

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.