Tabelas HTML verticais

A criação de tabelas HTML com linhas verticais oferece uma maneira única de exibir dados, com cabeçalhos de linha posicionados no lado esquerdo em vez do topo. Para conseguir isso, o estilo CSS pode ser aplicado para transformar a estrutura da tabela.

Estilo CSS

Para renderizar linhas da tabela como colunas verticais, as seguintes regras CSS pode ser usado:

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

Isso fará com que as células da tabela fluam verticalmente, com os cabeçalhos correspondentes aparecendo à esquerda de cada linha.

Integração AngularJS

Manter o acesso às linhas da tabela, agora exibidas como colunas, pode ser conseguido incorporando as seguintes regras CSS:

/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

tr:not(:first-child)>* {
  border-left: 0;
}

Essas regras garantem que as bordas entre as células da tabela sejam renderizadas apenas nas bordas, fornecendo uma distinção clara entre as linhas. Ao usar essas técnicas em conjunto com AngularJS, você pode manipular dinamicamente os dados da tabela enquanto preserva a orientação vertical.