Produto
PRODUTO
Tabelas
Tabelas são utilizadas para estruturar conjuntos de informação em um grid que facilita a compreensão dos dados e de sua relação hierárquica.
Anatomia
Desktop
| Header1 | Header2 | Header3 | Header4 |
|---|---|---|---|
| Item 1 | Value | Value | Value |
| Item 2 | Value | Value | Value |
| Item 3 | Value | Value | Value |
| Item 4 | Value | Value | Value |
| Item 5 | Value | Value | Value |
Mobile
No contexto mobile recomenda-se a exibição simplificada de dados, e até 2 sets de dados e eventuais ações relacionadas.
Mobile 
Layout
“As tabelas adaptam-se a largura de seu container, onde suas colunas responde à lógica de grids do sistema. O conteúdo de cada coluna respeita o padding lateral, garantindo a organização e legibilidade do layout.”
Código
Esse componente utiliza o plugin JQuery Basic Table.
HTML 
Exibir código
Copiar código
Exibir código
<table id="table" class="table">
<caption>Title Here</caption>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Header1"><span class="bt-content">Item 1</span></td>
<td data-th="Header2"><span class="bt-content">Value</span></td>
<td data-th="Header3"><span class="bt-content">Value</span></td>
<td data-th="Header4"><span class="bt-content">Value</span></td>
</tr>
<tr>
<td data-th="Header1"><span class="bt-content">Item 2</span></td>
<td data-th="Header2"><span class="bt-content">Value</span></td>
<td data-th="Header3"><span class="bt-content">Value</span></td>
<td data-th="Header4"><span class="bt-content">Value</span></td>
</tr>
<tr>
<td data-th="Header1"><span class="bt-content">Item 3</span></td>
<td data-th="Header2"><span class="bt-content">Value</span></td>
<td data-th="Header3"><span class="bt-content">Value</span></td>
<td data-th="Header4"><span class="bt-content">Value</span></td>
</tr>
<tr>
<td data-th="Header1"><span class="bt-content">Item 4</span></td>
<td data-th="Header2"><span class="bt-content">Value</span></td>
<td data-th="Header3"><span class="bt-content">Value</span></td>
<td data-th="Header4"><span class="bt-content">Value</span></td>
</tr>
<tr>
<td data-th="Header1"><span class="bt-content">Item 5</span></td>
<td data-th="Header2"><span class="bt-content">Value</span></td>
<td data-th="Header3"><span class="bt-content">Value</span></td>
<td data-th="Header4"><span class="bt-content">Value</span></td>
</tr>
</tbody>
</table>
SASS Exibir código
Copiar código
Exibir código
.table{
display: table;
width: 100%;
text-align: left;
background-color: #ffffff;
border-collapse: separate;
border-spacing: 0;
caption{
font-family: Lato;
font-size: 1.25em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
letter-spacing: normal;
color: #1e2a54;
text-align:left;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ebebeb;
top: 3px;
position:relative;
overflow:hidden;
background-color:#fff;
border-radius: 4px 4px 0 0;
padding: 20px 40px;
@media(max-width: $MQMobile){
border-bottom: 1px solid #ebebeb;
padding: 15px 20px;
}
}
tr{
background-color: #fff!important;
}
td,
th{
border: none;
@media(max-width: $MQMobile){
padding: 0;
}
@media(min-width: $MQMobile){
padding: 0 0 0 20px;
}
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 3;
letter-spacing: normal;
color: #1e2a54;
}
th{
font-family: Lato;
font-size: 0.875em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #7f7f7f;
}
td{
border-top: 1px solid #ebebeb;
}
@media(min-width: $MQMobile){
tr:first-child th:first-child{
border-top-left-radius: 4px;
}
tr:first-child th:last-child{
border-top-right-radius: 4px;
}
tr:last-child td:first-child{
border-bottom-left-radius: 4px;
}
tr:last-child td:last-child{
border-bottom-right-radius: 4px;
}
tr td:first-child,
tr th:first-child{
padding-left:40px;
border-left: 1px solid #ebebeb;
}
tr td:last-child,
tr th:last-child{
border-right: 1px solid #ebebeb;
}
tr:first-child th{
border-top: 1px solid #ebebeb;
}
tr:last-child td{
padding-bottom:20px;
border-bottom: 1px solid #ebebeb;
}
}
&.bt{
thead{
display: none;
}
tbody{
tr{
td{
border: none;
display: block;
border-width: 0 1px 0 1px;
border-style: solid;
border-color: #ebebeb;
&:first-child{
border-top: 1px solid #ebebeb;
}
&:before{
content: attr(data-th);
font-weight: bold;
width: 6.5em;
display: inline-block;
background-color: #f7f7f7;
padding-left: 20px;
margin-right: 20px;
}
.bt-content{
vertical-align: top;
}
}
&:last-child td:last-child{
border-bottom: 1px solid #ebebeb;
border-radius: 0 0 4px 4px;
}
}
}
}
}