I tried :
.bb {
border-bottom:1px;
}
But no effect at all.
-
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>
讨论(0)
-
Try the following instead:
<html>
<head>
<title>Table row styling</title>
<style type="text/css">
.bb td, .bb th {
border-bottom: 1px solid black !important;
}
</style>
</head>
<body>
<table>
<tr class="bb">
<td>This</td>
<td>should</td>
<td>work</td>
</tr>
</table>
</body>
</html>
讨论(0)
-
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
.
讨论(0)
-
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;
}
讨论(0)
-
Add border-collapse:collapse
to the table.
Example:
table.myTable{
border-collapse:collapse;
}
table.myTable tr{
border:1px solid red;
}
This worked for me.
讨论(0)
- 热议问题