Ir para conteúdo
Fórum Script Brasil
  • 0

Consertando uma tabela desalinhada


Frank K Hosaka

Pergunta

Ontem, eu perdi um tempão para consertar uma tabela. Os programadores profissionais dividem o HTML em <div> para apresentar as informações de forma atraente e consistente, mas eu ainda não cheguei lá. Eu imaginava que eu era um programador eventual que só sabe mexer com o <table>.

Um <table> profissional tem o formato <table><thead><th></th></thead><tbody><tr><td></td></tr></tbody></table>, mas eu só uso <table><tr><td></table>, mas o desalinhamento mostrou que nem mereço o diploma de programador eventual.

Eu tentei consertar a tabela, estudando Bootstrap 5.3. Lá eu vi <th scope='col'>, <th scope='row'>, bem como <thead> e <tbody>. Sem dúvida ficou bem melhor, mas ainda sobrou um pedaço da linha que não queria encostar na borda da tabela. Mas por sorte eu encontrei uma célula <td> que não tinha o cabeçalho <th> correpondente, e isso sim explicou porque a minha tabela ficou desalinhada. Depois de descobrir o meu erro, joguei fora o <th scope='col'>, <thead> e <tbody> bem como um monte de </th> e </td>.

Outra coisa curiosa que eu encontrei é que eu não conseguia avermelhar um <td> se eu usar <table class="table table-striped">, quando a linha é mais escura. É que eu usei um CSS particular .preto , .vermelho. Assim, precisei padronizar a formatação, tudo em Bootstrap. Ao invés de .preto, eu usei <td class="text-dark">. O problema é que eu trabalho mais com números, assim eu precisava alinhar tudo pela direita, e a gramática do Bootstrap é essa: <td class="text-danger text-end">. Fazendo teste isolado, ele funciona, mas dentro do Blade do Laravel, eu só tive problema.

O meu código ficou assim:

codigo.blade.php

@php if($custoatual!=$custoanterior){$classe="text-danger text-end";} else {$classe="text-dark text-end";} @endphp
<td class={{$classe}}>{{$custoanterior}}

Depois de quatro horas, eu descobri o meu erro. Não basta usar aspas na variável, mas também em torno do token do blade, assim:

 

<td class="{{$classe}}">{{$custoanterior}}

A vida é bruta!

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...