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

چگونه جدول‌ها را موازی کنیم

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

مثال

* {
  box-sizing: border-box;
}
/* ایجاد قالب‌بندی دو ستونی */
.column {
  شناور: چپ;
  عرض: 50%;
  مجال: 5px;
}
/* Clearfix (حذف شناوری) */
.row::after {
  محتوای: "";
  clear: both;
  نمایش: table;
}

مستقیم امتحان کنید

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

مثال

* {
  box-sizing: border-box;
}
.row {
  نمایش: flex;
}
.column {
  flex: 50%;
  مجال: 5px;
}

مستقیم امتحان کنید

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

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

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

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

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

مثال

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

مستقیم امتحان کنید

مرتبط صفحه‌ها

آموزش:CSS جدول

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

آموزش:CSS Flexbox