جدولهای واکنشگرا
پایه
نام | موقعیت | دفتر | سن | تاریخ شروع | حقوق |
---|---|---|---|---|---|
کارا دنورز | دستیار فروش | تبریز | 46 | 2011/12/06 | 145,600 تومان |
بری الن | طراح وب | همدان | 47 | 2011/03/21 | 356,250 تومان |
لورل لنس | مدیر سیستم ها | همدان | 21 | 2009/02/27 | 103,500 تومان |
اولیور کوئین | توسعه دهنده | اهواز | 30 | 2010/07/14 | 86,500 تومان |
تامی مرلین | طراح وب | تبریز | 51 | 2008/11/13 | 183,000 تومان |
جان دیگل | توسعه دهنده جاوا اسکریپت | مشهد | 29 | 2011/06/27 | 183,000 تومان |
روی هارپر | پشتیبان مشتری | تبریز | 27 | 2011/01/25 | 112,000 تومان |
نام | موقعیت | دفتر | سن | تاریخ شروع | حقوق |
<div class="table-responsive"> <!-- Required for Responsive -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
جدول جاوا اسکریپت
برای ایجاد جدول های سازگار با موبایل، کلاس .table-responsive-stack
را اضافه کنید.
نام | رنگ | طعم |
---|---|---|
اپل | سبز و قرمز | شیرین و ترش |
موز | زرد | شیرین |
انبه | سبز نارنجی | تند |
نارنجی | نارنجی | شیرین و ترش |
زغال اخته | آبی | کمی شیرین |
<table class="table table-bordered table-striped table-responsive-stack">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Color</th>
<th>Taste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Green and Red</td>
<td>Sweet and Tart</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>Sweet and Mushy</td>
</tr>
<tr>
<td>Mango</td>
<td>Yellowish Green</td>
<td>Tangy</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>Sweet and Tangy</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>Mild Sweetness</td>
</tr>
</tbody>
</table>