CSS+HTML: How to draw table/cell border
12,583
table.t_data { border-collapse:collapse }
Author by
Budda
I am a software developer, here is my hobby: Virtual Football Manager Elita
Updated on June 04, 2022Comments
-
Budda about 2 years
Here is my CSS code for table:
table.t_data { /* border: 1px; - **EDITED** - doesn't seem like influences here */ background-color: #080; border-spacing: 1px; margin: 0 auto 0 auto; } table.t_data thead th, table.t_data thead td { background-color: #9f9; /* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */ padding: 5px; margin: 1px; } table.t_data tbody th, table.t_data tbody td { background-color: #fff; /* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */ padding: 2px; }
I need to display the following HTML:
<table class="t_data"> <thead style="padding:1px"> <tr> <th>#</th> <th>Team</th> <th>Stadium Name</th> <th>Size</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Team 1</td> <td>Name 1</td> <td>Size 1-1, 2-1, 3-1</td> </tr> <tr> <td>2</td> <td>Team 1</td> <td>Name 1</td> <td>Size 1-1, 2-1, 3-1</td> </tr> <tr> <td>3</td> <td>Team 1</td> <td>Name 1</td> <td>Size 1-1, 2-1, 3-1</td> </tr> </tbody> </table>
It display perfect (as expected) table in Mozilla Firefox and in IE8:
But there are issues in other browsers/modes:
In Chrome the line between head and body is double width:
In IE8 (switched into IE7 compatibility mode) all lines are double width:
Question: what are CSS options to make each line boldness same (1px)?