CSS+HTML: How to draw table/cell border

12,583
 table.t_data { border-collapse:collapse }
Share:
12,583
Budda
Author by

Budda

I am a software developer, here is my hobby: Virtual Football Manager Elita

Updated on June 04, 2022

Comments

  • Budda
    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:

    Mozilla table formatted

    But there are issues in other browsers/modes:

    In Chrome the line between head and body is double width:

    Chrome table formatted

    In IE8 (switched into IE7 compatibility mode) all lines are double width:

    IE table formatted

    Question: what are CSS options to make each line boldness same (1px)?