CODEWITHSUNDEEP
htmlcss
Nate
Nate

Reputation: 28424

Stray border in table column header

I have the following CSS in my header:

    <style type="text/css">
    table, td
    {
        border-color: #600;
        border-style: solid;
    }

    table
    {
        border-width: 0 0 1px 1px;
        border-spacing: 0;
        border-collapse: collapse;
    }

    td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 0;
        background-color: #FFC;
    }
</style>

And the following table in my page body:

<table>
    <tr>
        <th style="width: 100px;">column</th><th style="width: 180px;">column</th><th style="width: 100px;">column</th><th style="width: 100px;">column</th>
        <th style="width: 180px;">column</th><th style="width: 180px;">column</th> <th>column</th>
    </tr>
    <tr>
        <td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td><a href="">text</a></td>
    </tr>
</table>

Here is the result:

enter image description here

See how there is a left border on the first column header? What would be causing this, and how can I get it to go away?

Thanks!

Upvotes: 2

Views: 5386

Answers (3)

Umesh Aawte
Umesh Aawte

Reputation: 4690

Please update your table style

 table
    {
        border-width: 0 0 1px 0px;
        border-spacing: 0;
        border-collapse: collapse;
    }

Also add a left border to a TD tag so that there will be left order on td and not on th.

td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        background-color: #FFC;
    }​

Try this fiddle

Upvotes: 1

SVS
SVS

Reputation: 4275

Add this to your css:

tr{border-left:1px solid #000;}
tr:first-child{border-left:none;}

otherwise you will get not border on left

check this fiddle: http://jsfiddle.net/surendraVsingh/KNNeZ/

Upvotes: 3

Rab
Rab

Reputation: 35582

DEMO : Border Corrected I have added margin:20px; on table for clarity you can remove it later

Upvotes: 1

Related Questions