What I want to say here is like some kind of add-on on @Suciu Lucian's answer.
The weird situation I ran into is that when I apply the solution of @Suciu Lucian in my file, it works in Chrome but not in Safari (and did not try in Firefox). After I studied the guide of styling table border published by w3.org, I found something alternative:
table.myTable{
border-spacing: 0;
}
table.myTable td{
border-bottom:1px solid red;
}
Yes you have to style the td instead of the tr.
You should define the style on the td element like so:
<html>
<head>
<style type="text/css">
.bb
{
border-bottom: solid 1px black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Test 1
</td>
</tr>
<tr>
<td class="bb">
Test 2
</td>
</tr>
</table>
</body>
</html>
Add border-collapse:collapse to the table.
Example:
table.myTable{
border-collapse:collapse;
}
table.myTable tr{
border:1px solid red;
}
This worked for me.
tr td
{
border-bottom: 2px solid silver;
}
or if you want the border inside the TR tag, you can do this:
tr td {
box-shadow: inset 0px -2px 0px silver;
}
Source: Stackoverflow.com