Home/ Questions/Q 8775863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T18:54:38+00:00

How can I, given the current css coding below, be able to do the

  • 0

How can I, given the current css coding below, be able to do the following:

  1. Fix the table such that there is an INNER border only of 1px solid FFF in the table headers.
  2. Fix the table header such that the missing right border is completed.
  3. Put a top border of 1px solid #6B6B6B after the table headers (as it appears to be missing, and I dont know how to fix it, I am also using IE 9)
  4. Alternate the row color (white) starting at the first row (not the table header), then in the 2nd row it would be (gray).

I am just new to css and am not familiar with advanced programming.

Heres a fiddle: http://jsfiddle.net/3CzbV/

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
table {
    border-collapse: collapse;
    border: 1px solid #6B6B6B;
}
table th {
    color: red;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
}
table td {
    color: blue;
}
table td, table th {
    border: 1px solid #6B6B6B;
}
table tr:first-child th {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
    border-right: 0;
}
</style>

</head>

<body>

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (2,1)</td>
        <td>Cell (3,1)</td>
        <td>Cell (4,1)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
        <td>Cell (3,2)</td>
        <td>Cell (4,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (2,3)</td>
        <td>Cell (3,3)</td>
        <td>Cell (4,3)</td>
    </tr>
</table>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First you should add the <thead> and <tbody> elements/tags or possibly even a <tfoot>

    HTML Markup

    <div>
<table>
    <thead>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (2,1)</td>
        <td>Cell (3,1)</td>
        <td>Cell (4,1)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
        <td>Cell (3,2)</td>
        <td>Cell (4,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (2,3)</td>
        <td>Cell (3,3)</td>
        <td>Cell (4,3)</td>
    </tr>
</tbody>
</table>
</div>

    The Styles

    div{
    background-color: grey;
    margin: 20px;
    padding: 10px;
}

table {
    border-collapse: collapse;
    border: 1px solid #6B6B6B;
    margin: 20px;
}

/* 1.Fix the table such that there is an INNER border only of 1px solid FFF in the table headers*/
/* 2.Fix the table header such that the missing right border is completed */

table thead tr th {
    border: 1px solid #FFF;

/* 3.Put a top border of 1px solid #6B6B6B after the table headers */
    border-bottom: 1px solid #6B6B6B; 
}

table tbody tr:nth-child(odd) {
background-color: white;
}

    Fiddle

    • 0