دسته بندی ها
08:33 1399/05/29

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

مشخصات سوال کننده :
کاربر : Kpa91     امتیاز کاربر : 12     رتبه کاربر : 59
دسته بندی : Asp.net Web Form

به این سوال امتیاز بدهید    0
تعداد بازدید این سوال : 6153
پاسخ دهنده : hamdola 19:01 1399/05/29

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

ببینید شما با استفاده از فریم ورک بوت استرپ که یک فریم ورک کاملا رایگان هست می تونید کل پروژه و قالب خودتون و جدول رو به صورت کاملا 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>

 

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

 

 

ویرایش شده در جمعه 24 تیر 1401 ساعت 09:10:06
به این پاسخ امتیاز بدهید    1
امتیاز: 121 رتبه: 12
پاسخ دهنده : moein 15:20 1399/06/01

سلام

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

 

<table class="tabel table-responsive>

 

این از تگ tabel 

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

 

<div class="table-responsive>

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

موفق باشید

به این پاسخ امتیاز بدهید    0
امتیاز: 92 رتبه: 14
1 نظر
mohammad-i : نیازی نیست table-responsive رو دو جا استفاده کنید.

امتیاز کاربر : 260   رتبه کاربر : 7   تاریخ ثبت : 03:25 1399/06/01
پاسخ دهنده : Kpa91 22:57 1399/06/05

درود و عرض ادب متاسفانه تلاشهای من به خوبی جواب نداد -آیا تنها استفاده از 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>

 

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

ویرایش شده در جمعه 24 تیر 1401 ساعت 09:10:33
به این پاسخ امتیاز بدهید    0
امتیاز: 12 رتبه: 59
1 نظر
fateme : شما مطمئن هستید که به درستی فایلهای بوت استرپ رو به پروژه لینک کردید؟ بنظرم یکبار روی یک پروژه خالی این کار رو انجام بدید

امتیاز کاربر : 1617   رتبه کاربر : 2   تاریخ ثبت : 11:01 1399/06/05
پاسخ دهنده : Kpa91 22:58 1399/06/05

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

به این پاسخ امتیاز بدهید    0
امتیاز: 12 رتبه: 59
پاسخ دهنده : mohammad-i 23:34 1399/06/05

نکته: برای تست اینکه بوت استرپ لود میشه یا نه، به یه 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>

 

به این پاسخ امتیاز بدهید    0
امتیاز: 260 رتبه: 7
2 نظر
Kpa91 : مشکل الان من این است که سلولهای یک جدول رسپانسیو نمیشن یعنی با کوچک کردن صفحه زیر هم قرار نمی گیرند و اگر ریسپانسیو شوند یک نوار اسکرول افقی زیرشان ظاهر میشود

امتیاز کاربر : 12   رتبه کاربر : 59   تاریخ ثبت : 10:26 1399/06/21
Kpa91 : بله ممنون مثال شما کار کرد امیدوارم رو پروژه هم جواب بده

امتیاز کاربر : 12   رتبه کاربر : 59   تاریخ ثبت : 02:10 1399/06/06
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود