ansaurus

Question

How to specify the bottom border of a <tr> ?

Answer 1

+3 A:

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 2009-09-06 03:53:27

Thank you for your reply.But it's not working.

Shore 2009-09-06 03:55:26

I stand corrected: try border-bottom: 1px solid black; instead.

David Andres 2009-09-06 03:59:11

Still not working.

Shore 2009-09-06 04:02:13

You can't style a `<tr>`, as it's only a "logical grouping element", but it's not actually rendered. You can only style the `<td>` or `<th>` elements inside the `<tr>`. Make sure you have some.

deceze 2009-09-06 04:05:45

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 2009-09-06 04:06:12

Answer 2

+1 A:

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 2009-09-06 04:03:08

why can't modify tr directly?

Shore 2009-09-06 04:07:34

as **deceze** said: "You can't style a <tr>, as it's only a "logical grouping element", but it's not actually rendered. You can only style the <td> or <th> elements inside the <tr>. Make sure you have some."

Eran Betzalel 2009-09-06 04:09:01

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 2009-09-06 04:20:34

ansaurus

tags:

views:

answers:

How to specify the bottom border of a <tr> ?

related questions