CSS AND HTML CODE FOR RESPONSIVE TABLE
In this post I am going to share with you few tips of making responsive table which looks very fancy and attractive when viewed on mobiles as well as on pc and tablets.Lets us have a look at the code given in code snippet and output of that code in the form of table below:
<style>
*{
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
body {
background-color : #32312f ;
font-family : sans-serif ;
}
.table-container {
padding : 0 10% ;
margin : 40px auto 0 ;
}
.heading {
font-size : 40px ;
text-align : center ;
color : #f1f1f1 ;
margin-bottom : 40px ;
}
.table {
width : 100% ;
border-collapse : collapse ;
}
.table thead {
background-color : blue ;
}
.table thead tr th {
font-size : 14px ;
font-weight : 600 ;
letter-spacing : 0.35px ;
color : #FFFFFF ;
opacity : 1 ;
padding : 12px ;
vertical-align : top ;
border : 1px solid #dee2e685 ;
}
.table tbody tr td {
font-size : 14px ;
letter-spacing : 0.35px ;
font-weight : normal ;
color : #f1f1f1 ;
background-color : #3c3f44 ;
padding : 8px ;
text-align : center ;
border : 1px solid #dee2e685 ;
}
.table .text_open{
font-size : 14px ;
font-weight : bold ;
letter-spacing : 0.35px ;
color : #FF1046 ;
}
.table tbody tr td .btn{
width : 130px ;
text-decoration : none ;
line-height : 35px ;
display : inline-block ;
background-color : #FF1046 ;
font-weight : medium ;
color : #FFFFFF ;
text-align : center ;
vertical-align : middle ;
user-select : none ;
border : 1px solid transparent ;
font-size 14px ;
opacity : 1 ;
}
@media (max-width : 768px) {
.table thead {
display : none ;
}
.table, .table tbody, .table tr, .table td {
display : block ;
width : 100% ;
}
.table tr {
margin-bottom : 15 px ;
}
.table tbody tr td {
text-align : right ;
padding-left : 50% ;
position : relative ;
}
.table th:before{
content : attr(data-label) ;
position : absolute ;
left : 0 ;
width : 50% ;
padding-left : 15px ;
font-weight : 600 ;
font-size : 14px ;
text-align : left ;
}
}
</style>
<div class = "table-container">
<h1 class = "heading">Table of Index</h1>
<table class = "table">
<thead>
<tr>
<th>S.no</th>
<th>Class</th>
<th>Chapter Name</th>
<th>Read</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label = "S.no">1.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">BASIC CONCEPTS OF CHEMISTRY</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2020/05/basic-concepts-of-chemistry.html" target="_blank">View</a></td>
</tr>
<td data-label = "S.no">2.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">STRCUTURE OF ATOM</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/structure-of-atom.html" target="_blank">View</a></td>
</tr>
</tr>
<td data-label = "S.no">3.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">CLASSIFICATION OF ELEMENTS</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/classification-of-elements.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">4.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">CHEMICAL BONDING & MOLECULAR STRUCTURE</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/5states-of-matter.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">5.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">STATES OF MATTER</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/chemical-bonding.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">6.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">CHEMICAL THERMODYNAMICS</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/thermodynamics.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">7.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">CHEMICAL EQUILIBRIUM</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/equilibrium.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">8.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">REDOX REACTIONS</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/8redox-reactions.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">9.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">HYDROGEN</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/hydrogen.htmL" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">10.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">ALKALI METALS</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/alkali-metals.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">11.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">ALKALINE EARTH METALS</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/alkaline-earth-metals.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">12.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">13.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">14.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">15.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">16.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
<tr>
<td data-label = "S.no">17.</td>
<td data-label = "Class">+1</td>
<td data-label = "Chapter Name">p-BLOCK</td>
<td data-label = "View"><a class = "btn" href="https://www.theseekers.live/2021/05/boron-family.html" target="_blank">View</a></td>
</tr>
</tbody>
</table>
</div>
OUT PUT OF THE ABOVE CODE IS GIVEN BELOW IN
Table of Index
| S.no | Class | Chapter Name | Read |
|---|---|---|---|
| 1. | +1 | BASIC CONCEPTS OF CHEMISTRY | View |
| 2. | +1 | STRCUTURE OF ATOM | View |
| 3. | +1 | CLASSIFICATION OF ELEMENTS | View |
| 4. | +1 | CHEMICAL BONDING & MOLECULAR STRUCTURE | View |
| 5. | +1 | STATES OF MATTER | View |
| 6. | +1 | CHEMICAL THERMODYNAMICS | View |
| 7. | +1 | CHEMICAL EQUILIBRIUM | View |
| 8. | +1 | REDOX REACTIONS | View |
| 9. | +1 | HYDROGEN | View |
| 10. | +1 | ALKALI METALS | View |
| 11. | +1 | ALKALINE EARTH METALS | View |
| 12. | +1 | p-BLOCK | View |
| 13. | +1 | p-BLOCK | View |
| 14. | +1 | p-BLOCK | View |
| 15. | +1 | p-BLOCK | View |
| 16. | +1 | p-BLOCK | View |
| 17. | +1 | p-BLOCK | View |
0 Comments