Question

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:

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!

Answer 1

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