Como criar uma tabela responsiva com CSS HTML no blog
 |
| Como criar uma tabela responsiva com CSS HTML no blog |
No tutorial de hoje ensinarei vocês a crirarem uma tabela dinâmica e responsiva no Blogger com CSS HTML
O passo é muito simples. Vá para o painel do blogger,
escolha o blogger e clique em Editar HTML.
Feito isso, pressione CRTL F e pesque por: ]]></b:skin> ou </style>
Depois, cole o código disponibilizado abaixo, logo acima de uma dessas tags.
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;} table img{width: 100%;height: auto} table.tr-caption-container{padding:0;border:none} table td.tr-caption{font-size:12px;font-style:italic;} table {border-spacing: 0;border-collapse: collapse;} td, th {padding: 0;} th {text-align: left;} .table {width: 100%;max-width: 100%;margin-bottom: 20px;} .table a {text-decoration: none !important;} .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;} .table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;} .table > thead > tr > th a {color:#fff !important;} .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {border-top: 0;} .table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;} table col[class*="col-"] {position: static;display: table-column;float: none;} table td[class*="col-"], table th[class*="col-"] {position: static;display: table-cell;float: none;} .table-responsive {min-height: .01%;overflow-x: auto;} @media screen and (max-width: 767px) { .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;} .table-responsive > .table {margin-bottom: 0;} .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {white-space: nowrap;} .table-responsive > .table-bordered {border: 0;} }
Salve.
Ao criar um postagem, basta copiar o código abaixo e colcocar na área da postagem.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nome/th>
<th>Dados </th>
</tr>
</thead>
<tbody>
<tr>
<td>Walker</td>
<td>Walker</td>
</tr>
<tr>
<td>Walker</td>
<td>Walker</td>
</tr>
<tr>
<td>Walker</td>
<td>Walker</td>
</tr>
</tbody>
</table>