20

I tried :

.bb {
    border-bottom:1px;
}

<tr class="bb">

But no effect at all.

Nick F
  • 9,781
  • 7
  • 75
  • 90
omg
  • 136,412
  • 142
  • 288
  • 348

5 Answers5

36

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>
David Andres
  • 31,351
  • 7
  • 46
  • 36
  • I stand corrected: try border-bottom: 1px solid black; instead. – David Andres Sep 06 '09 at 03:59
  • 57
    You can't style a ``, as it's only a "logical grouping element", but it's not actually rendered. You can only style the `` or `` elements inside the ``. Make sure you have some. – deceze Sep 06 '09 at 04:05
  • See my edit to this post. This is a bare bones html document, but I've added the !important clause to the style. This was done because, in your case, I can't tell what other styles have been defined and if any of these may have a higher specificity (i.e., priority) than what we're adding. – David Andres Sep 06 '09 at 04:06
  • 4
    style="border-bottom: solid 1px black !important;" on td worked for me. However I had to add style="border-collapse: collapse;" to table in order not to get gaps between the borders of adjacent cells. – Mohamad Fakih Jul 19 '13 at 06:59
  • @deceze you can style a directly if you add border-collapse to the parent table. See my below answer. – Suciu Lucian Jul 18 '14 at 17:27
24

Add border-collapse:collapse to the table.

Example:

table.myTable{
  border-collapse:collapse;
}

table.myTable tr{
  border:1px solid red;
}

This worked for me.

Suciu Lucian
  • 430
  • 4
  • 12
  • 4
    This should be the accepted answer. Putting the border on the table cells makes it break. – Uri Klar May 19 '14 at 08:25
  • Like stated before this really should be the accepted answer. Adding the elements to your table will not do what you think it will. That is to say if you don't want to add more html to your page and rework your tables... this is the simplest solutions I've seen thus far. – greaterKing Apr 21 '16 at 13:44
6

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>
Eran Betzalel
  • 4,105
  • 3
  • 38
  • 66
  • why can't modify tr directly? – omg Sep 06 '09 at 04:07
  • 1
    as **deceze** said: "You can't style a , as it's only a "logical grouping element", but it's not actually rendered. You can only style the or elements inside the . Make sure you have some." – Eran Betzalel Sep 06 '09 at 04:09
  • 3
    This is a good approach. The only thing I would caution against is that the size of the html render will grow in proportion to the number of TD elements in the table to class. If size is a concern, we will be more effective by targetting the table element itself a la table#idForTable tr td {border-bottom: 1px solid black}. One clause for the whole set of rows. – David Andres Sep 06 '09 at 04:20
1
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;
}
JD - DC TECH
  • 1,193
  • 9
  • 13
1

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.

Halt
  • 1,055
  • 9
  • 18