Adicionar borda inferior à linha da tabela <tr>

Eu tenho uma tabela de 3 por 3. Eu preciso de uma maneira de adicionar uma borda para a parte inferior de cada linha tre dar uma cor específica.

Primeiro eu tentei da maneira direta, ou seja:

<tr style="border-bottom:1pt solid black;">

Mas isso não funcionou. Então eu adicionei CSS assim:

tr {
border-bottom: 1pt solid black;
}

Isso ainda não funcionou.

Eu preferiria usar CSS porque, então, não preciso adicionar um styleatributo a cada linha. Eu não adicionei um borderatributo ao <table>. Espero que isso não esteja afetando meu CSS.

Eu tive um problema como este antes. Eu não acho que trpode pegar um estilo de borda diretamente. Minha solução alternativa foi estilizar os tds na linha:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Adicione border-collapse:collapseà sua regra de tabela:

table { 
    border-collapse: collapse; 
}

Ligação

Use border-collapse:collapsena mesa e border-bottom: 1pt solid black;no tr

Usar

border-collapse:collapse como Nathan escreveu e você precisa definir

td { border-bottom: 1px solid #000; }

Há muitas respostas incompletas aqui. Como você não pode aplicar uma borda à trtag, é necessário aplicá-la às tags tdou da seguinte thmaneira:

td {
  border-bottom: 1pt solid black;
}

Isso deixará um pequeno espaço entre cada um td, o que provavelmente não é desejável se você desejar que a borda apareça como se fosse a trtag. Para "preencher as lacunas", por assim dizer, você precisa utilizar a border-collapsepropriedade no tableelemento e definir seu valor collapsecomo:

table {
  border-collapse: collapse;
}

Usar

table{border-collapse:collapse}
tr{border-top:thin solid}

Substitua "thin thin" por propriedades de CSS.

Exiba a linha como um bloco.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

e para exibir cores alternativas simplesmente:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Você pode usar a box-shadowpropriedade para simular uma borda de um trelemento. Ajuste a posição Y de box-shadow(abaixo representado como 2px) para ajustar a espessura.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Eu tentei adicionar

    table {
      border-collapse: collapse;
    }   

ao lado do

    tr {
      bottom-border: 2pt solid #color;
    }

e depois comentou o colapso das fronteiras para ver o que funcionava. Apenas ter o seletor de tr com propriedade de borda inferior funcionou para mim!

Sem CSS de borda ex.

Nenhuma foto de fronteira ao vivo

Borda CSS ex.

Tabela com a foto Border ao vivo

Descobri ao usar esse método que o espaço entre os elementos td fazia com que uma lacuna se formasse na borda, mas não tenha medo ...

Uma maneira de contornar isso:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Com o CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Você pode fazer o mesmo com toda a linha também.

Há border-bottom-style, border-top-style, border-left-style, border-right-style. Ou simplesmenteborder-style isso se aplica a todas as quatro bordas de uma só vez.

Você pode ver (e tentar on-line) mais detalhes aqui

Várias respostas interessantes. Como você quer apenas uma borda inferior (ou superior), aqui estão mais duas. Supondo que você queira uma borda azul com 3px de espessura. Na seção de estilo, você pode adicionar

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

No código da tabela

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Outra solução para isso é border-spacingpropriedade:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Sem borda CSS inferior:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Você não pode colocar uma borda em um elemento tr. Isso funcionou para mim no firefox e IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}