ওয়েবসাইট ডিজাইন করতে অনেকই টেবিল ব্যবহার করে থাকে কিন্তু টেবিলকে রেসপনসিভ করতে পারে না অনেকেই, এখানে একটি টেবিলকে রেসপনসিভ করে দেখানো হয়েছে।
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Responsive Table</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> table.members_details { width: 100%; border-collapse: collapse; } .members_details tr:nth-of-type(odd) { background: #eee; } .members_details th { background: #333; color: white; font-weight: bold; } .members_details td, .members_details th { padding: 6px; border: 1px solid #ccc; text-align: left; } @media only screen and (max-width: 768px) { .members_details > thead { display: none !important;} .text_align_center {text-align: left;} .members_details table, .members_details thead, .members_details tbody, .members_details th, .members_details td, .members_details tr { display: block; } .members_details tr { border: 1px solid #ccc; margin-bottom: 10px;} .members_details tr:last-child {margin-bottom: 0;} .members_details td { position: relative; padding: 0 0 0 40%; width: 60%; min-height: 18px; } .members_details td:before { position: absolute; left: 6px; padding-right: 10px; white-space: nowrap; } .members_details td:nth-of-type(1):before { content: "Member ID"; } .members_details td:nth-of-type(2):before { content: "Member Name"; } .members_details td:nth-of-type(3):before { content: "Profession"} .members_details td:nth-of-type(4):before { content: "Blood Group"; } .members_details td:nth-of-type(5):before { content: "Mailing Address"; } .members_details td:nth-of-type(6):before { content: "Contact"} } </style> </head> <body> <div id="page-wrap"> <h1>Responsive Table</h1> <table class="members_details"> <thead> <tr> <th class="members_id text_align_center"><b>Member ID</b></th> <th class="members_name text_align_center"><b>Name</b></th> <th class="members_position text_align_center"><b>Profession</b></th> <th class="members_blood_group text_align_center"><b>Blood Group</b></th> <th class="members_address text_align_center"><b>Mailing Address</b></th> <th class="members_contact text_align_center"><b>Contact</b></th> </tr> </thead> <tbody> <tr> <td class="members_id text_align_center">12213</td> <td class="members_name">Md. Mahmudul Hasan </td><td class="members_position">Head of Procurement & Commercial Navana Furniture Ltd.</td> <td class="members_blood_group text_align_center">B+</td> <td class="members_address">167/15, 5B, Corner View RA, East Kafrul, Dhaka Cantonment, Dhaka-1206</td> <td class="members_contact">01111111111, [email protected]</td> </tr> <tr> <td class="members_id text_align_center">231</td> <td class="members_name">Rabindra Nath Das </td><td class="members_position">Manager-Project, Corporate IT,Navana Group</td> <td class="members_blood_group text_align_center">N/A</td> <td class="members_address">Dhaka</td> <td class="members_contact">01111111111, [email protected]</td> </tr> </tbody> </table> </div> </body> </html>