Responsive table Full
*খুব সাধারণ কমন একটা টেবিল। যা সম্পূর্ণ রিসপনসিভ। মোবাইল ফেন্ডলী। যা যে কোন ডিভাইজে ব্যবহার উপযোগী। এক সময় এই টেবিলের জন্য নানান ওয়েব সাইটের দুয়ারে দুয়ারে ঘুরেছি। আপনি যদি আমার এই টেবিলটি দেখতে পান তবে, আপনাকে আর ঘুরতে হবে না। জাস্ট কোড কপি করে পেস্ট করুন সুন্দর রিসপনসিভ টেবিল হয়ে যাবে। যদি কলাম বাড়ানোর প্রয়োজন হয় তবে <th> বাড়িয়ে নিন। আর যদি রো এর বাড়ানোর প্রয়োজন হয় তবে <tr> বাড়িয়ে দিন। যদি না হয় তবে আমাকে জানান আমি আপনাকে সাহায্য করবো।
✅ বৈশিষ্ট্য:
- Single Black Border.
- Full wide Mobile friendly.
- There is also a black border around the entire table.
| আইটেম | বর্ণনা | দাম | স্টক | রেটিং |
|---|---|---|---|---|
| প্রোডাক্ট A | লাইটওয়েট | $ 45 | ১২ | 4.5 |
| প্রোডাক্ট B | লাইফ ব্যাটারি | $ 100 | ৭ | 4.1 |
``````````````````````````````````````````
<!--FULL WIDTH RESPONSIVE TABLE WITH SINGLE BLACK BORDER-->
<style>
.table-full {
width: 100%;
border-collapse: collapse; /* সেলগুলোর বর্ডার একত্রিত করে */
border: 1px solid black; /* পুরো টেবিলের সিঙ্গেল বর্ডার কালো */
}
.table-full th,
.table-full td {
padding: 10px 12px;
border: 1px solid black; /* প্রতিটি সেলের সিঙ্গেল বর্ডার কালো */
text-align: left;
font-size: 14px;
}
.table-full th {
background: #f7f7f7; /* হেডার ব্যাকগ্রাউন্ড ধূসর */
font-weight: 600;
}
</style>
```````````
<table class="table-full">
<thead>
<tr>
<th>আইটেম</th>
<th>বিবরণ</th>
<th>দাম</th>
<th>স্টক</th>
<th>রেটিং</th>
</tr>
</thead>
<tbody>
<tr>
<td>প্রোডাক্ট A</td>
<td>লাইটওয়েট</td>
<td>$ 45</td>
<td>১২</td>
<td>4.5</td>
</tr>
<tr>
<td>প্রোডাক্ট B</td>
<td>লাইফ ব্যাটারি</td>
<td>$100 </td>
<td>৭</td>
<td>4.1</td>
</tr>
</tbody>
</table>
```````````````````````````````````````
0 Comments:
Post a Comment