Table showed different in IE from Opera
-
20-08-2019 - |
Question
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.
OTHER TIPS
use
style="border:1px solid black"
in the table-tag, then.
oh, and there's a closing missing for the last cell.
border="0"
However, you should use stylesheets instead for things like this....
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow