Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Adicionar borda

por Geovana Da Silva
| 37.2k xp | 10 posts

Como faço para adicionar um border-bottom na tabela mas com a exceção do ultimo tr dela?

<table>
            <tr>
              <td>Calories</td>
              <td>277kcal</td>
            </tr>
            <tr>
              <td>Carbs</td>
              <td>0g</td>
            </tr>
            <tr>
              <td>Protein</td>
              <td>20g</td>
            </tr>
            <tr>
              <td>Fat</td>
              <td>22g</td>
            </tr>
          </table>


tr:not(tr:nth-child(4) td){ 
    border-bottom: 1px solid var(--light-Grey);
    padding: 10px;
}
1 resposta
solução!
por Lorena Garcia
| 8322.6k xp | 12181 posts
Alura Scuba Team Suporte Educacional

Oi Geovana, tudo bem?

O código que você forneceu está quase correto, mas é importante lembrar que o seletor :not não é totalmente suportado em todos os navegadores para o caso de seleção de elementos específicos. Uma alternativa seria adicionar uma classe à última <tr> para aplicar o estilo desejado.

Aqui está uma solução usando a classe:

<table>
  <tr>
    <td>Calories</td>
    <td>277kcal</td>
  </tr>
  <tr>
    <td>Carbs</td>
    <td>0g</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>20g</td>
  </tr>
  <tr class="no-border">
    <td>Fat</td>
    <td>22g</td>
  </tr>
</table>

tr:not(.no-border) td {
  border-bottom: 1px solid var(--light-Grey);
  padding: 10px;
}

Dessa forma, adicionamos a classe no-border à última <tr> para evitar a aplicação do estilo de borda inferior. Isso deve funcionar de forma mais consistente em diversos navegadores.

Um abraço e bons estudos.