Skip to content

Instantly share code, notes, and snippets.

@Tarmana
Created October 9, 2020 07:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tarmana/1865ce0fdbfee614be070e4320864b89 to your computer and use it in GitHub Desktop.
Save Tarmana/1865ce0fdbfee614be070e4320864b89 to your computer and use it in GitHub Desktop.
Responsive table free use
<style>
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #dcdcdc;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}
</style>
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Tabel</th> <th>Keterangan</th> </tr>
<tr> <td>Blogspot</td> <td>Contoh Tabel</td> </tr>
<tr> <td>Blog</td> <td>Klubseru.com</td> </tr>
<tr> <td>Responsive</td> <td>Tabel Responsive</td> </tr>
</tbody> </table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment