রেসপনসিভ টেবিল

ওয়েবসাইট ডিজাইন করতে অনেকই টেবিল ব্যবহার করে থাকে কিন্তু টেবিলকে রেসপনসিভ করতে পারে না অনেকেই, এখানে একটি টেবিলকে রেসপনসিভ করে দেখানো হয়েছে।

<!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 &amp; 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>

মন্তব্য করুন

×
কপিরাইট © ২০০৬-২০২৩ সমকাল দর্পণ. সর্বস্বত্ব সংরক্ষিত।
সার্বিক তত্ত্বাবধানে রয়েল টেকনোলজিস