RESPONSIVE TABLE

No.	Social Media
1.	YouTube
2.	Facebook
3.	Twitter
4.	Instagram

CSS Code For Responsive Table-

1. Theme
2. Customize
3. Blogger Theme Designer
4. Advanced
5. Add CSS
6. Apply to Blog

 /* CSS Post Table by www.mywebs2512.com*/
.post-body table th, .post-body table td, .post-body table caption{border:1px solid #2E2E2E;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #2E2E2E;}
.post-body th{font-weight:600;}
.post-body table caption{border:none;font-style:Arial;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}
.post-body th{background:#007874;color:#ffff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%} 

1. new post
2. edit HTML

<table border=1>
<tr>
<th>No.</th>
<th>Social Media</th>
</tr>
<tr>
<td>1.</td>
<td>YouTube</td>
</tr>
<tr>
<td>2.</td>
<td>Facebook</td>
</tr>
<tr>
<td>3.</td>
<td>Twitter</td>
</tr>
<tr>
<td>4.</td>
<td>Instagram</td>
</tr>
 </table>

***

2nd method

How To Add Responsive Table In Blogger Post 2020

•   CODE 👇



<table style="color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;">
<tbody>
<tr>
<th style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 1</th>
<th style="height:0px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 2</th>
<th style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#B1B6AF;
font-weight:700;
border-radius: 0px;">Heading 3</th>


</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table A</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table B</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Table C</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Facebook</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Youtube</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Blogger</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Resolution</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Filesize</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background: #E1DDDD;">1080 p</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">1000 MB</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Resolution</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Filesize</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#F1F1F1;">Download</td>
</tr>
<tr>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background: #E1DDDD;">1080 p</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">1000 MB</td>
<td style="height:50px;
transition:all .3s;
text-align:center;
width:auto; background:#E1DDDD;">Download</td>
</tr>
</tbody>
</table>


Searches related to how to add responsive table in blogger

• how to make table in blogger post
• blogger table html
• responsive div table
• responsive table generator
• how to add table of contents in blogger
• how to insert table in blogger