রেসপনসিভ টেবিল
ওয়েবসাইট ডিজাইন করতে অনেকই টেবিল ব্যবহার করে থাকে কিন্তু টেবিলকে রেসপনসিভ করতে পারে না অনেকেই, এখানে একটি টেবিলকে রেসপনসিভ করে দেখানো হয়েছে।
<!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>
