How to make a responsive flat table on blogger or blogspot
Tables are difficult to make responsive, but can be tricked by utilizing media queries and overflows. By utilizing media queries and overflows, I will try to explain step by step how to make a responsive flat table on blogger or blogspot .
As we already know tables can be very broad. A row of data rows can be together to enter a table. Tables with 100% width can be reduced and enlarged, but when the screen is reduced the table rows will look narrow and maybe the text will be stacked. This is why tables are difficult to make responsive.
Responsive design is about how we adapt our design to screens of different sizes. So here when the website is opened on a narrower screen, such as a cellphone eating a table, it will still look wider and we can move the table sideways. So that the responsive design layout is not damaged and we can read the table more easily.
Then can this be applied to bloggers? Can. Here I will guide you in creating responsive tables with metro colors and flat designs without borders.
Here are the steps on how to make a responsive flat table on blogger or blogspot:
1. Again, I remind you to back up your default template first, here is a tutorial on how to backup blogger templates:
Easy ways to backup blogger or blogspot templates
2. Next, edit your blogger template you, if you don't know how to edit a blogger template, here's how to edit a blogger template:
How to edit a blogger or blogspot template
3. Please enter the responsive meta tag first on your blog. Put code <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>after code <head>.
4. The next step is, put the following code before the code ]]></b:skin>or </style>:
The code above is to use a media screen max-width: 767px. So when the maximum screen width is 767px, the table width will be fixed and there will be a scroll under the table.
5. Here is an example of using a flat responsive table in HTML or in your posts. Keep in mind that if you want to include it in the blogger template, use a single quote (') and if you want to include it in a post, use double quote ("), here is the code:
The following is the result of the code above:
Tips: To change the blue color in the table above, you can change the code background-color:#3498DB;
OK, friend, it's easy, right, have fun creating ...
Responsive design is about how we adapt our design to screens of different sizes. So here when the website is opened on a narrower screen, such as a cellphone eating a table, it will still look wider and we can move the table sideways. So that the responsive design layout is not damaged and we can read the table more easily.
Then can this be applied to bloggers? Can. Here I will guide you in creating responsive tables with metro colors and flat designs without borders.
Here are the steps on how to make a responsive flat table on blogger or blogspot:
1. Again, I remind you to back up your default template first, here is a tutorial on how to backup blogger templates:
Easy ways to backup blogger or blogspot templates
2. Next, edit your blogger template you, if you don't know how to edit a blogger template, here's how to edit a blogger template:
How to edit a blogger or blogspot template
3. Please enter the responsive meta tag first on your blog. Put code <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>after code <head>.
4. The next step is, put the following code before the code ]]></b:skin>or </style>:
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;}
}The code above is to use a media screen max-width: 767px. So when the maximum screen width is 767px, the table width will be fixed and there will be a scroll under the table.
5. Here is an example of using a flat responsive table in HTML or in your posts. Keep in mind that if you want to include it in the blogger template, use a single quote (') and if you want to include it in a post, use double quote ("), here is the code:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Nama Terakhir</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gian</td>
<td>MR</td>
</tr>
<tr>
<td>Kaka</td>
<td>Slank</td>
</tr>
<tr>
<td>John</td>
<td>Lennon</td>
</tr>
</tbody>
</table>
</div>
The following is the result of the code above:
| First Name | Last name |
|---|---|
| Alexander | MR |
| Peter | Xu |
| John | Lennon |
Tips: To change the blue color in the table above, you can change the code background-color:#3498DB;
OK, friend, it's easy, right, have fun creating ...
No comments:
Post a Comment