Monday, May 11, 2020

Tables are difficult to be responsive, but can be tricked by using media queries and overflows. By utilizing media queries and overflows, I will try to explain how step by step how to make a responsive flat table on blogger blogspot.
As we already know the table can be very broad. A row of data row can be together to enter into a table. Tables with a width of 100% can be reduced and enlarged but when the screen is minimized the row table will look narrow and maybe the text will overlap. This is why tables are difficult to be responsive.
Responsive design is all about adjusting the design to screens of different sizes. So here when the website is opened on a screen such as a cell phone the table will still look wider and we can shift the table to the side. So that responsive layout design is not broken and we can read tables 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 to create a responsive flat table on blogger or blogspot:

1. First, I remind you to Backup your default template

2. Next go to edit your blogger template. Edit in HTML mode.

3. Please enter your responsive meta tag first on your blog. Put the code <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> after the 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 using the max-width screen media: 767px. So when the maximum width of the screen is 767px, the width of the table will be fixed and there will be a scroll under the table.

5. The following is an example of using a flat responsive table in your HTML or post. Keep in mind if you want to be included in the blogger template then use single quote (') and if you want to be included in the post use double quote (") , here is the code:

<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>First Name</th> 
    <th>Last name</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>John</td> 
    <td>Doe</td>  
  </tr>
  <tr> 
    <td>Maria</td> 
    <td>Callas</td> 
  </tr>
  <tr> 
    <td>John</td> 
    <td>Lennon</td> 
  </tr>
</tbody> 
</table>
</div>

Here are the results of the code above.This result is

First Name	Last name
John	Doe
Maria	Callas
John	Lennon

Tip: To change the blue color in the table above, you can change the background-color code: #3498DB;

This result is from the color settings of my Blogger template and my CSS parameters. Yours may be different. Try changing the colors of CSS code to accommodate the table to your template design.

Another example with 3 columns

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Score</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>John</td>
		<td>Cena</td>
		<td>121</td>
	</tr>
	<tr>
		<td>The</td>
		<td>Rock</td>
		<td>112</td>
	</tr> 
	<tr>
		<td>Brave</td>
		<td>Heart</td>
		<td>86</td>
	</tr>
   <tr>
		<td>Martin</td>
		<td>Jerry</td>
		<td>48</td>
	</tr>
	</tbody>
</table>

First Name	Last Name	Score
John	Cena	121
The	Rock	112
Brave	Heart	86
Martin	Jerry	48

An example of a responsive table with 5 columns and a fixed header

<!--for demo wrap-->
  <h1>Fixed Table header</h1>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>Code</th>
          <th>Company</th>
          <th>Price</th>
          <th>Change</th>
          <th>Change %</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Fixed Table header

Code	Company	Price	Change	Change %

AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%
AAC	AUSTRALIAN COMPANY	$1.38	+2.01	-0.36%
AAD	AUSENCO	$2.38	-0.01	-1.36%
AAX	ADELAIDE	$3.22	+0.01	+1.36%
XXD	ADITYA BIRLA	$1.02	-1.01	+2.36%

This is all for now and I hope you find useful the info on how to put a responsive table in Blogger Post.

TRICKSTOFIX

How to make a responsive flat table on blogger or blogspot

Fixed Table header

R. Aleksiev Monday, May 11, 2020 Tags: Code, Table, Tricks