How to make no borders in a td rowspan rows

Question

I have table with td rowspan and has 3 rows so how can I make those rows with no border while keeping the main one with border?

here is the table..

I want to make it look like this, I have edited this with paint just erased the lines.

here is the jsfiddle demo

---

here is my html code

<table id="Table">
    <thead>
        <tr>
            <th>Track</th><th>Car</th>
            <th></th>
            <th>Score</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">LIST 1</td>
            <td>Name 1</td>
            <td>LT</td>
            <td>59,800</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>TR</td>
            <td>58,000</td>
            <td>10 days ago</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>SO</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 2</td>
            <td>Name 4</td>
            <td>NL</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 3</td>
            <td>Name 5</td>
            <td>NR</td>
            <td>59,000</td>
            <td>9 days ago</td>
        </tr>
        <tr>
            <td>LIST 4</td>
            <td>Name 6</td>
            <td>FI</td>
            <td>57,000</td>
            <td>10 days ago</td>
        </tr>
    </tbody>
</table>

and css

#Table {
    table-layout:fixed;
    width: 400px;
    text-align: left;
    border-collapse:collapse;
}
#Table th {
    background: #F9F9F9;
    border-bottom: solid 1px black;
    padding-top: 3px;
    padding-bottom: 4px;
}
#Table td {
    background: #F9F9F9;
    border-bottom: 1px solid black;
    padding-top: 3px;
    padding-bottom: 4px;
}

#Table th:nth-child(1) { width:180px; }
#Table th:nth-child(2) { width:200px; }
#Table th:nth-child(3) { width:30px; }
#Table th:nth-child(4) { width:80px; }
#Table th:nth-child(5) { width:120px; }

Answer 1

A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.

See you updated jsfiddle.

CSS added/modified :

/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}

/*added*/
#Table tr{
    border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
    border-bottom: none;
} 

HTML:

<table id="Table">
    <thead>
        <tr>
            <th>Track</th>
            <th>Car</th>
            <th></th>
            <th>Score</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="no-border-row">
            <td rowspan="3">LIST 1</td>
            <td>Name 1</td>
            <td>LT</td>
            <td>59,800</td>
            <td>8 days ago</td>
        </tr>
        <tr class="no-border-row">
            <td>Name 2</td>
            <td>TR</td>
            <td>58,000</td>
            <td>10 days ago</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>SO</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 2</td>
            <td>Name 4</td>
            <td>NL</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 3</td>
            <td>Name 5</td>
            <td>NR</td>
            <td>59,000</td>
            <td>6 days ago</td>
        </tr>
        <tr>
            <td>LIST 4</td>
            <td>Name 6</td>
            <td>FI</td>
            <td>57,000</td>
            <td>1 month ago</td>
        </tr>
    </tbody>
</table>

Answer 2

Add this to your CSS:

#Table tbody tr:nth-child(1) td:not(:first-child) { border-bottom: none; }
#Table tbody tr:nth-child(2) td { border-bottom: none; }

Example: http://jsfiddle.net/uerdg8gm/1/