开发者

CSS+HTML: How to draw table/cell border

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>
   开发者_C百科     <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:

CSS+HTML: How to draw table/cell border

But there are issues in other browsers/modes:

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

CSS+HTML: How to draw table/cell border

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

CSS+HTML: How to draw table/cell border

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


 table.t_data { border-collapse:collapse }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜