it-swarm-pt.tech

Usando uma tag <hr> com uma tabela?

Eu tenho uma tabela com bordas que são definidas como "none" no CSS. No entanto, quero colocar uma linha horizontal separando cada linha da tabela. Eu tentei colocar tags <hr> entre cada tag <td> </td> para uma linha específica, mas ela imprime uma linha preta horizontal com pequenos espaços em branco entre cada coluna.

Existe alguma maneira de imprimir uma linha horizontal dentro de uma tabela usando um método diferente?

14
user979150

Eu sugeriria colocar:

<tr style="border-bottom: 1px solid #000;">

em cada linha que você quer que a linha esteja ligada. Você também pode fazer isso individualmente para cada célula.


Atualizar

Eu recomendo usar uma classe css e ter uma folha de estilo separada, se puder. Por exemplo

<tr class="bordered"></tr>

tr.bordered {
    border-bottom: 1px solid #000;
}
20
Undefined

A melhor maneira de adicionar uma linha horizontal entre linhas é com bordas de CSS. Primeiro, você deseja recolher todas as bordas da tabela para que não haja espaço entre as células (isso também pode ajudar na sua solução, mas eu não recomendo o uso de hr para essa finalidade). Em seguida, especifique uma borda no lado inferior de cada célula (td). Você pode, da mesma forma, colocar bordas à esquerda, à direita, para cima etc. Veja o HTML autônomo abaixo.

<html>
<head>
    <style type='text/css'>
        table.test { border-collapse: collapse; }
        table.test td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <table class='test'>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </table>
</body>
</html>

Para mais opções de fronteira, marque esta página w3Schools .

14
marcianx

Você pode definir uma classe CSS para o seu <tr> 'separado':

<style>
tr.separated td {
    /* set border style for separated rows */
    border-bottom: 1px solid black;
} 

table {
    /* make the border continuous (without gaps between columns) */
    border-collapse: collapse;
}
</style>

Em seguida, basta marcar as linhas obrigatórias:

 <tr>
      <td>
      <td>
 </tr>
 <tr class="separated">
      <td>
      <td>
 </tr>
 <tr>
      <td>
      <td>
 </tr>

Veja o exemplo https://jsfiddle.net/64nydcfu/1/

3
DRCB

Você não pode colocar nada que não seja uma fileira de mesa dentro do corpo de uma mesa. 

Você deve, em vez disso, dar uma classe às linhas que precisam ser sublinhadas, para que você possa defini-las como tendo uma borda inferior na folha de estilo. 

2
GordonM

Eu sei que esta discussão não foi tocada há algum tempo, mas me deparei com essa solução possível?

Por exemplo, se estiver usando uma tabela de 2 colunas, use <td colspan="2"></td>. Ele abrangerá duas células nas duas colunas, economizando a necessidade de qualquer CSS adicional.

<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>

Por favor, seja legal este é o meu primeiro post! :)

2
PastyAndPeas

Você quer colocar uma borda no elemento tr. Hr é uma Regra Horizonal, não uma borda e não deve ser usada como uma. 

http://jsfiddle.net/RhaqJ/

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

<table cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
1
SpaceBeers

Você pode tentar isso, está funcionando perfeitamente:

<tr>
    <td colspan="Number of columns">
        <hr>
    </td>
</tr>
0
Ran Alcobi

O atributo noshade="noshade" ajuda você a remover a sombra e mais alguma idéia pode ser encontrada em este link , eu quero dizer linha de RH baseada em CSS.

E estilo de mesa como

.bottomborder { 
   border-bottom: 1px solid #CECECE; 
}

<td class=border-bottom> 

A seguir não funciona

<tr class=border-bottom>
0
Sameera Thilakasiri