কম্পিউটার

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?


সিএসএস দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   div{
      overflow-x: auto;
   }
   table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      border: 1px solid rgb(0, 0, 0);
   }
   th, td {
      text-align: left;
      padding: 8px;
   }
   tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h1>Responsive Table Example</h1>
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
<th>marks</th>
</tr>
<tr>
<td>JACK</td>
<td>ROY</td>
<td>50</td>
<td>60</td>
<td>10</td>
<td>20</td>
<td>40</td>
<td>50</td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>Evelyn</td>
<td>Monroe</td>
<td>24</td>
<td>14</td>
<td>22</td>
<td>44</td>
<td>55</td>
<td>44</td>
<td>11</td>
<td>55</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>Joe</td>
<td>Anderson</td>
<td>54</td>
<td>22</td>
<td>99</td>
<td>55</td>
<td>91</td>
<td>61</td>
<td>81</td>
<td>11</td>
<td>22</td>
<td>55</td>
</tr>
</table>
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?

উইন্ডোর আকার পরিবর্তন করার সময় স্ক্রলবারটি নিম্নরূপ প্রদর্শিত হবে -

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?


  1. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল ভাসমান উপাদান তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল মূল্যের টেবিল তৈরি করবেন?

  3. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল প্রশংসাপত্র তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ব্লগ লেআউট তৈরি করবেন?