چگونه ایجاد کنیم: جدول‌های عمودی

چگونه جدول‌ها را به صورت عمودی قرار دهیم

چگونه از CSS استفاده کنیم float ویژگی‌های ایجاد جدول‌های قرار گرفتن در کنار یکدیگر:

مثال

* {
  box-sizing: border-box;
}
/* ایجاد آرایش دو ستونی */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (حذف شناور) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

آزمایش شخصی کنید

چگونه از CSS استفاده کنیم flex ویژگی‌های ایجاد جدول‌های قرار گرفتن در کنار یکدیگر:

مثال

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

آزمایش شخصی کنید

توجه:Flexbox در نسخه‌های 10 و قبل از آن از Internet Explorer پشتیبانی نمی‌کند. آیا باید از float یا flex به انتخاب شما بستگی دارد. اما اگر نیاز دارید که از نسخه‌های 10 و قبل از آن از Internet Explorer پشتیبانی کنید، باید از float.

نکته:برای اطلاعات بیشتری در مورد ماژول Flexible Box Layout بخوانید: آموزش CSS Flexbox.

افزودن پاسخگویی

مثال بالا در دستگاه‌های موبایل زیبا به نظر نمی‌رسد، زیرا دو ستون فضای زیادی از صفحه را اشغال می‌کنند.

برای ایجاد یک جدول پاسخگو، که از آرایش دو ستونی به آرایش تمام‌صفحه در دستگاه‌های موبایل تبدیل شود، لطفاً از معیارهای زیر استفاده کنید:

مثال

/* پیکربندی پاسخگو - در صفحه‌هایی که اندازه نمایش کمتر از 600 پیکسل است، دو ستون به جای قرار گرفتن در کنار یکدیگر، به صورت پشته‌ای قرار می‌گیرند */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

آزمایش شخصی کنید

صفحات مرتبط

آموزش‌ها:CSS جدول

آموزش‌ها:CSS شناور

آموزش‌ها:CSS Flexbox