Talebas

Tabelas .tabela

Ex.: "tabela"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Tabela Striped .tabela-striped

Use .tabela-striped para adicionar zebra-striping a qualquer linha da tabela dentro do <tbody>

Ex.: "tabela tabela-striped"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Cores Padrões

Adicione as Cores padrões para estilizar as tabelas.

Ex.: "tabela tabela-striped tabela-noturno"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Ex.: "tabela tabela-striped tabela-sucesso"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Tabela Hover .tabela-hover

Adicione .table-hover para ativar um estado de foco nas linhas da tabela em um <tbody>.

Ex.: "tabela tabela-striped tabela-hover"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Tabela Pequena .tabela-p

Adicione .tabela-p para tornar qualquer .tabela mais compacto, cortando todo o preenchimento das células pela metade.

Ex.: "tabela tabela-striped tabela-p"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

Tabela Responsiva .tabela-responsive

Ex.: "tabela tabela-responsive tabela-hover tabela-p"

#	Primeira	Segunda	Terceira
1	Sandro	Araújo	@sandroweb
2	Alisson	Asaph	@asaph
3	SandroWeb Ltda		@sndroaraujo

                
                
                <table class="tabela">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Primeira</th>
                            <th>Segunda</th>
                            <th>Terceira</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Sandro</td>
                            <td>Araújo</td>
                            <td>@sandroweb</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Alisson</td>
                            <td>Asaph</td>
                            <td>@asaph</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td colspan="2">SandroWeb Ltda</td>
                            <td>@sndroaraujo</td>
                        </tr>
                    </tbody>
                </table>