ایجاد چدول در bootstrap

سوال

سلام خسته نباشید

سوال من در مورد جدول افقی ریسپانسیو که در حالت xs عمودی میشه

در حال بررسی 0
۱۳۹۵/۱۲/۱ ۶:۵۱:۵۲ 5 پاسخ کاربر تازه 0

پاسخ ها ( 5 )

  1. aliyaghobi
    1
    ۱۳۹۵/۱۲/۱ ۸:۰۸:۴۳
    پاسخ

    سلام

    شما منظورتون جدول (table) در حالت xs به حالت عمودی دربیاد یا گرید (grid) ؟!

    اگه منظورتون جدول باشه که من فکر نکنم به حالت عمودی دربیاد. تو سایت بوت استرپ هم ندیدم! ولی گرید ها میشه

    اگر دمو دارید این جا قرار بدید

    گرید ها: http://plink.ir/grid

     

  2. zohreh
    0
    ۱۳۹۵/۱۲/۳ ۸:۲۶:۲۳
    پاسخ

    سلام ممنون از وقتی که میگذارید

    نه باید دوتا جدول داشته باشیم که دومی در حالت xs شو بشه و جدول قبلی هیدن بشه

    اگه کمکم کنید ممنون میشم.

  3. aliyaghobi
    1
    ۱۳۹۵/۱۲/۳ ۱۱:۴۷:۴۱
    پاسخ

    برای هیدن کردن جدول در سایز xs باید hidden-xs را بهش اضافه کنید و hidden-lg را برای مخفی کردن در سایز بزرگ

    حالا شما دو تا جدول می خواهین که اولی در سایز بزرگ نمایش داده بشه و در سایز کوچک مخفی

    مثال:

    ۱
    <table class="table hidden-xs">

    حالا به جدول دومی کد زیر را اضافه کنید تا جدول اولی در سایز کوچک مخفی و جدول دومی نمایش داده شود

    ۱
    <table class="table hidden-lg visible-xs">

     

    برای اطلاعات بیشتر اینجا را ببینید:

    http://plink.ir/jb5Pg

    موفق باشید

     

  4. zohreh
    0
    ۱۳۹۵/۱۲/۶ ۷:۵۳:۱۰
    پاسخ

    ممنونم

    یه سوال دیگه چه طوری جدولو عمودی کنم؟؟؟

    جدول من در حالت افقی سه ردیف داره که td های اون درست مقابلش فرار میگره این مشکلی نیست

    مشکل من در حالت xs که جدول باید عمودی بشه وtd ها زیر th قرار بگیره

    هر کاری میکنم th ها زیر هم هستند بعد td ها با هم زیر th فرار میگیرند

    در صورتی که هر بخش باید جدا باشه

    امیدوارم منظورمو خوب رسونده باشم

     

  5. aliyaghobi
    1
    ۱۳۹۵/۱۲/۶ ۱۴:۰۲:۳۹
    پاسخ

    من تا حالا همچین چیزی ندیدم که جدول عمودی شه! گوگلی هم کردم اما متاسفانه چیزی پیدا نکردم تو دریای بی‌کران اینترنت.

    حالا شما اگر دمو ازش دارین بزارید تا ببینیم

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

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>۱</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>johncarter@mail.com</td>
                    <td>Lorem ipsum dolor sit amet…</td>
                </tr>
                <tr>
                    <td>۲</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>peterparker@mail.com</td>
                    <td>Vestibulum consectetur scelerisque…</td>
                </tr>
                <tr>
                    <td>۳</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                    <td>Integer pulvinar leo id risus…</td>
                </tr>
            </tbody>
        </table>
    </div>

     

ارسال یک پاسخ