Как указать нижнюю границу <tr>?

Я пробовал:

.bb {
    border-bottom:1px;
}

<tr class="bb">

Но никакого эффекта вообще.

Ответ 1

Попробуйте вместо этого:

<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>

Ответ 2

Добавить border-collapse:collapse в таблицу.

Пример:

table.myTable{
  border-collapse:collapse;
}

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

Это сработало для меня.

Ответ 3

Вы должны определить стиль элемента td следующим образом:

<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>

Ответ 4

tr td 
{
    border-bottom: 2px solid silver;
}

или если вы хотите границу внутри тега TR, вы можете сделать это:

tr td {
    box-shadow: inset 0px -2px 0px silver;
}

Ответ 5

То, что я хочу сказать здесь, похоже на какое-то дополнение к ответу @Suciu Lucian.

Странная ситуация, с которой я столкнулся, заключается в том, что когда я применяю решение @Suciu Lucian в своем файле, он работает в Chrome, но не в Safari (и не пытался в Firefox). После того, как я изучил руководство таблицы стилей оформления, опубликованное w3.org, я нашел что-то альтернативное:

table.myTable{
  border-spacing: 0;
}

table.myTable td{
  border-bottom:1px solid red;
}

Да, вам нужно стилизовать td вместо tr.