Converting blogger HTML tables into Smart Responsive tables using CSS

Requirement: Make all HTML Tables in Blogspot responsive ,pretty & a bit smarter.
How: Its 2 step process.
  1. Add CSS for styling to template
  2. Modify your Table Structure accordingly.
Here is the link  of the post having table with formatting provided below to see things in action, try changing size of browser to see how it adapts to various screen sizes.

Here are some screenshots as well:

On Desktop:
 On Mobile/Tablets/Phones:

Steps:

1:Add the following CSS code in template from HTML editor:
<style>
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: white;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: white;
}
  table td {border-left: 1px solid #ddd;}
  table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td {border-left: 0px;}
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
</style>

2:Change your tables html structure as shown for below example table, observe data-label attribute in each td tag these turns into headings in small screens such as mobile/tablets <td data-label="Server Name">:
<table>
<thead>
<tr><th>Server Name</th><th>Trace Flag</th><th>Status</th><th>Global</th><th>Session</th></tr>
</thead>
<tbody>
<tr><td data-label="Server Name">PRD-MSSQL01C</td><td data-label="Trace Flag">1222</td><td data-label="Status">1</td><td data-label="Global">1</td><td data-label="Session">0</td></tr>
<tr><td data-label="Server Name">PRD-MSSQL01C</td><td data-label="Trace Flag">1224</td><td data-label="Status">1</td><td data-label="Global">1</td><td data-label="Session">0</td></tr>
<tr><td data-label="Server Name">PRD-MSSQL01C</td><td data-label="Trace Flag">4136</td><td data-label="Status">1</td><td data-label="Global">1</td><td data-label="Session">0</td></tr>
</tbody>
</table>

That's it...clear browser cache and hit reload!

Comments

  1. 1xBet Casino is a good possibility in case you are on the lookout for avalanche slots. You won't discover too many bonus options hooked up to varieties of|these sort of|most of these} slots. However, they're good in case you are on the lookout for a throwback kind of recreation. 888Casino is a good possibility in case you are on the lookout for three-reel slots. 1xBet Casino is a significant pressure within the worldwide online gambling space. It offers almost every thing you could need from one of the best online gambling 토토사이트 websites.

    ReplyDelete

Post a Comment

Note:Please be gentle while commenting and avoid spamming as comment are anyways moderated thank you.

Popular posts from this blog

Adding copy to clipboard button to every google code prettify pre blocks in blogger

Script to delete the files older then 2 days from All Available Drives On Servers:\AnyDirectory

Adding Home Older Newer Post Buttons in new Blogger templates such as Contempo