Introdução ao layout de tabela Tailwind
Neste artigo, exploraremos o Tailwind Table Layout e como ele pode ser usado para criar tabelas responsivas e dinâmicas.
As tabelas são uma parte essencial do desenvolvimento web, permitindo-nos apresentar os dados de forma clara e organizada. No entanto, projetar um layout de mesa pode ser um desafio, especialmente se você deseja torná-lo bonito e responsivo em diferentes dispositivos.
Usando a classe de layout da tabela no Tailwind , podemos definir a exibição do layout da tabela para controlar a aparência da tabela.
Classes de Layout de Tabela Tailwind
Vamos dar uma olhada nas classes de layout de tabela disponíveis no Tailwind:
| Aulas | Visão geral |
| table-auto | A classe table-auto pode ser aplicada a um elemento de tabela para ajustar automaticamente a largura da tabela e suas células com base no conteúdo. |
| mesa fixa | A classe CSS Tailwind fixa em tabela aplica um layout fixo a um elemento de tabela. |
Sintaxe
<element class="table-auto">...</element>
Este exemplo se concentra na classe table-auto para implementação no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-medium"Table Layout Class in Tailwind
class="font-medium text-gray-500 my-2 text-sm"Using table-auto class
class="bg-amber-200"
class="table-auto border border-slate-800"
class="border border-slate-800 p-2"Languages
class="border border-slate-800"About
class="font-medium"
class="border border-slate-800"Python
class="border border-slate-800 p-2"
Python is a popular general-purpose programming
language. Among its many uses are machine learning,
web development, desktop applications, and many others.
class="border border-slate-800"Java
class="border border-slate-800 p-2"
The Java programming language is a powerful
general-purpose programming language. A wide
range of applications can be developed with it,
including desktop and mobile applications,
embedded systems, big data processing, and so on.
class="border border-slate-800"Bootstrap
class="border border-slate-800 p-2"
JavaScript is one of the most powerful and
flexible programming languages available today.
Using it, we can make interactive webpages with
popup menus, animations, and form validation.
No exemplo a seguir, o Tailwind ilustra como usar a classe table-fixed :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-medium"Table Layout Class in Tailwind
class="font-medium text-gray-500 my-2 text-sm"Using table-fixed class
class="bg-amber-200"
class="table-fixed border border-slate-800"
class="border border-slate-800 p-2 w-1/4"Languages
class="border border-slate-800 w-3/4"About
class="font-medium"
class="border border-slate-800"Python
class="border border-slate-800 p-2"
Python is a popular general-purpose programming
language. Among its many uses are machine learning,
web development, desktop applications, and many others.
class="border border-slate-800"Java
class="border border-slate-800 p-2"
The Java programming language is a powerful
general-purpose programming language. A wide
range of applications can be developed with it,
including desktop and mobile applications,
embedded systems, big data processing, and so on.
class="border border-slate-800"Bootstrap
class="border border-slate-800 p-2"
JavaScript is one of the most powerful and
flexible programming languages available today.
Using it, we can make interactive webpages with
popup menus, animations, and form validation.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
