Início / coding / Perguntas / 79157726
Accepted
Mina Hopgood
Asked: 2024-11-05 13:09:38 +0800 CST

Como remover o vão entre a borda e o fundo da mesa?

  • 772

Estou tentando colocar um border-bottom sob cada seção de dados, mas ele tem uma divisão entre a primeira e a segunda colunas. Não tenho certeza de como remover esse espaço entre as colunas. Tentei usar uma hrtag, mas percebi que usar borders funciona melhor, mas não consigo encontrar uma maneira de remover essa quebra de linha.

Também preciso remover a última linha, para que haja apenas três linhas separando cada seção de dados. Tentei adicionar uma classe e definir o border-bottom como branco, transparente e 0 para ver se funcionaria, mas nada.

Abaixo está meu código atual e uma foto do site.

      table {
        width: 100%;
      }

      .amount {
        font-weight: 700;
        color: hsl(14, 45%, 36%);
      }

      td {
        border-bottom: solid hsl(30, 18%, 87%) 1px;
      }

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

Como você pode ver, há uma divisão em cada linha da coluna e uma linha após a seção final de dados que precisa ser removida. Resultado do código atual

css

1 respostas

  1. Best Answer

    Use border-collapse: collapse; na sua tabela para remover a divisão entre bordas de colunas. Para a última linha, adicione uma classe e defina border-bottom: none;.

    Aqui está o CSS atualizado:

    table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border-bottom: solid hsl(30, 18%, 87%) 1px;
}

.no-border td {
  border-bottom: none;
}

    HTML:

    <tr class="no-border">
  <td>Fat</td>
  <td class="amount">22g</td>
</tr>

    Isso criará linhas contínuas sob cada seção e removerá a borda final.

    • 2

relate perguntas