Question

How can I remove the top blue border from the table header row and also the left blue border only in the first left hand column of my table?

Css:

<style type="text/css">
    table {
        width: 800px;
        color: #235A81;
        font-family: Arial;
        font-size: 9pt;
        border: 0px;
    }
    th, td {
        border: solid blue;
        border-width: 1px 0px 0px 1px;
        padding: 4px;
    }
    th {
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
        width: 110px;
        height: 20px;
        border-bottom: 1px solid #808080;
    }
    tbody {
        height: 200px;
    }

        div {
            position: relative;
            height: 200px;
            width: 800px;
            overflow-y: scroll;
            overflow-x: scroll;
            border: 1px solid red;
        }

        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody {
            height: auto;
        }
        table tbody tr:first-child td {
            padding: 32px 4px 4px 4px;
        }
</style>

Here is a js fiddle: http://jsfiddle.net/kvbS8/

Answer 1

try replacing your th, td declaration by:

th, td {
    border-bottom: 1px solid blue;
    border-right: 1px solid;
    padding: 4px;
}