نحوه ریسپانسیو کردن جداول در html

ایجاد جدول ریسپانسیو توسط فریم ورک بوت استرپ

ببینید شما با استفاده از فریم ورک بوت استرپ که یک فریم ورک کاملا رایگان هست می تونید کل پروژه و قالب خودتون و جدول رو به صورت کاملا Responsive طراحی کنید.

آموزش استفاده از فریم ورک بوت استرپ

مرحله اول :

خب برای استفاده از این فریم ورک اول به سایت getBootstrap.com مراجعه کنید و در بخش Download این فریم ورک رو دانلود کنید. 

مرحله دوم :

حالا فایلهای دانلود شده رو در روت پروژه خودتون کپی کنید. 2 تا فایل در اینجا مورد نیاز هست. اول فایل css و دوم فایل jquery که این دو فایل رو باید به پروژه خودتون لینک کنید.

بنابراین در بخش head فایل css رو لینک کنید تا بتونید از استایل های تعریف شده در این فریم ورک استفاده ببرید.

<!--css-->

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

بعد از لینک کردن فایل های css در قسمتی که فایلهای جی کوئری پروژه خودتون رو لینک می کنید فایل جی کوئری مربوط به بوت استرپ رو لینک کنید.

<!--jquery-->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

خب به همین سادگی!!! حالا شما میتونید با استفاده از کلاسهایی که در بوت استرپ تعریف شده یک قالب کاملا ریسپانسیو رو طراحی کنید.

طراحی یک جدول ریسپانسیو با استفاده از بوت استرپ

در ادامه براتون یک مثال رو میارم که یک جدول کاملا ریسپانسیو طراحی شده. شما کافیه دقیقا همین کدها رو توی پروژه خودتون کپی و پیست کنید و با توجه به نیاز خودتون تغییرات لازم رو توش اعمال کنید.

<div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-dark">
                <tr style="font-size:15px; font-weight:600;">

                    <td>ردیف</td>
                    <td>عنوان </td>
                    <td>تصویر</td>
                    <td>قیمت</td>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td style="width:60px; text-align:center;">1</td>
                        <td>@item.Title</td>
                        <td>@item.Image</td>
                        <td>@item.Price</td>
                   

                    </tr>
                    counter++;
                }
            </tbody>
        </table>
    </div>

در ادامه میتونید از فیلم آموزشی زیر هم برای ایجاد جدول کاملا ریسپانسیو با استفاده از بوت استرپ استفاده کنید. همچنین این لینک هم دقیقا در همین رابطه است.

سلام

ببینید ابتدای ساکن باید به تگ tabel با این شیوه بهش کلاس بدید

<table class="tabel table-responsive>

این از تگ tabel 

در مرحله بعد باید این تگ رو داخل یک تگ div بزارید و با این حالت بهش کلاس بدید

<div class="table-responsive>

امیدوارم کمکتون کنه

موفق باشید

درود و عرض ادب متاسفانه تلاشهای من به خوبی جواب نداد -آیا تنها استفاده از css های بوت استرپ کار را انجام می دهد یا فراخوانی فایلهای javascript آن نیز ضروری است؟ این هم از سورس کد بخشهایی که مربوط به بوت استرپ است

در بخش head

<meta charset=”utf-8″>     
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     
<meta name=”viewport” content=”width=device-width, initial-scale=1″>     
<link href="CSS/bootstrap.min.css" type="text/css" rel="Stylesheet"/>

در بدنه صفحه

<div class="container">
<div class="row">     
<div class="col-sm-11 col-md-12 col-lg-12 col-xl-12"></div>

این خطوط تا حدی جواب میدن اما نه خیلی خوب بعد به جداول که میرسیم دیگه عمل نمی کنن یعنی جداول رسپانسیو نمیشن

بله دوست عزیز اگه بوت استرپ به پروژه لینک نمیشد کلاسهای اون حین تاپ فرامین بطور خودکار ظاهر نمیشد من هنوز نمی دانم کاربرد فایهای جاوا اسکریپ بوت استرپ در چیست؟

نکته: برای تست اینکه بوت استرپ لود میشه یا نه، به یه div کلاس bg-danger بدید ببینید رنگش عوض میشه یا نه.

نکته: فایل های جاوااسکریپت در بوت استرپ، مکمل هستند و بهتره حتما قرار بدید توی پروژه. بعضی از کلاس ها نیاز به جاوااسکریپ هم دارند.

برای جدول رسپانسیو به این شکل عمل کنید:

<div class="table-responsive">
    <table class="table table-striped table-hover text-center">

       <thead>
         <tr>
           <th>نام</th>
           <th>نام خانوادگی</th>
           <th>کد ملی</th>
         </tr>
       </thead>

       <tbody>
         <tr>
           <td>Test</td>
           <td>Test</td>
           <td>Test</th>
         </tr>
       </tbody>

  </table>

</div>