پرش به محتوا

جدول اطلاعات محصول/دماوند پلیمر - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<section class="banner-table-section" dir="rtl" lang="fa" aria-labelledby="banner-types-title">
<style>
  /* بخش اصلی نگهدارنده */
  .banner-table-section {
    margin: 20px 0;
    font-family: 'IRANSansXFaNum', Tahoma, sans-serif;
    direction: rtl;
  }
 
  .banner-table-wrap {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
  }
 
  /* تنظیمات ریسپانسیو برای اسکرول افقی در موبایل */
  .banner-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
 
  .banner-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
  }
 
  .banner-table th, .banner-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
 
  .banner-table th {
    background-color: #f8f9fa;
  }
 
  /* --- بخش جادویی: محدود کردن سطرها --- */
 
  /* حالت پیش‌فرض: محدود به ارتفاع ۳ سطر */
  .is-collapsed .banner-table-responsive {
    max-height: 280px !important; /* این عدد را بسته به فونت خود می‌توانید کمی کم یا زیاد کنید */
    overflow: hidden !important;
  }
 
  /* ایجاد افکت محو شدن (Gradient) در حالت بسته */
  .is-collapsed .banner-table-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    z-index: 10;
  }
 
  /* دکمه نمایش بیشتر */
  .toggle-container {
    text-align: center;
    margin-top: 15px;
  }
 
  .btn-more {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
  }
 
  .btn-more:hover {
    background-color: #0056b3;
  }
</style>
 
<!-- اضافه کردن کلاس is-collapsed به بخش اصلی برای حالت بسته -->
<section class="banner-table-section is-collapsed" id="mainSection">
   <div class="banner-table-wrap">
   <div class="banner-table-wrap">
     <h2 id="banner-types-title" class="banner-table-title">انواع مخازن و کاربرد آن‌ها</h2>
     <h2 class="banner-table-title" style="text-align:center;">انواع مخازن و کاربرد آن‌ها</h2>


     <div class="banner-table-responsive">
     <div class="banner-table-responsive">
       <table class="banner-table">
       <table class="banner-table">
        <caption>جدول معرفی انواع مخازن، کاربرد و مزایای هر نوع</caption>
         <thead>
         <thead>
           <tr>
           <tr>
             <th scope="col">نام یا مدل مخزن</th>
             <th scope="col">نام یا مدل مخزن</th>
             <th scope="col">ظرفیت و ابعاد (لیست ویژگی‌ها)</th>
             <th scope="col">ظرفیت و ابعاد</th>
             <th scope="col">محل پیشنهادی برای نصب</th>
             <th scope="col">محل پیشنهادی برای نصب</th>
           </tr>
           </tr>
         </thead>
         </thead>
         <tbody>
         <tbody>
           <tr>
           <tr><td>مخزن آب افقی</td>
            <td>مخزن آب افقی</td>
          <td>بدنه کشیده با قطر کم، تمرکز بر توزیع وزن در طول مسیر، پایداری بالا در سطوح گسترده.</td>
            <td>بدنه کشیده با قطر کم، تمرکز بر توزیع وزن در طول مسیر، پایداری بالا در سطوح گسترده.</td>
          <td>فضاهای طولانی و باریک، حیاط‌های مستطیلی، یا مسیرهای انتقال آب در سطح زمین</td>
            <td>فضاهای طولانی و باریک، حیاط‌های مستطیلی، یا مسیرهای انتقال آب در سطح زمین.</td>
           </tr>
           </tr>
           <tr>
           <tr>
            <td>مخزن آب عمودی</td>
          <td>مخزن آب عمودی</td>
            <td>اشغال فضای سطحی بسیار کم، تمرکز بر ارتفاع، فشار هیدرولیکی مناسب در ارتفاع‌های بالا.</td>
          <td>اشغال فضای سطحی بسیار کم، تمرکز بر ارتفاع، فشار هیدرولیکی مناسب در ارتفاع‌های بالا</td>
            <td>پشت‌بام‌ها، فضاهای باز با محدودیت عرض، یا کنار دیوارها.</td>
          <td>پشت‌بام‌ها، فضاهای باز با محدودیت عرض، یا کنار دیوارها.</td>
           </tr>
           </tr>
           <tr>
           <tr>
            <td>مخزن کتابی (کم‌جا)</td>
          <td>مخزن کتابی (کم‌جا)</td>
            <td>عرض بسیار کم و طراحی فشرده، طراحی ارگونومیک برای عبور از فضاهای تنگ، بهینه‌سازی حداکثری فضا.</td>
          <td>عرض بسیار کم و طراحی فشرده، طراحی ارگونومیک برای عبور از فضاهای تنگ، بهینه‌سازی حداکثری فضا.</td>
            <td>فضای بین دیوار و نرده، کناره‌های راهروها، یا کناره‌های ساختمان.</td>
          <td>فضای بین دیوار و نرده، کناره‌های راهروها، یا کناره‌های ساختمان</td>
          </tr>
        </tr>
         
          <!-- سطر‌های اضافی -->
           <tr>
           <tr>
            <td>مخزن آب زیر پله</td>
              <td>مخزن آب زیر پله</td>
             <td>طراحی متناسب با شیب و زوایای نامتقارن، استفاده از فضای مرده (Dead Space) زیر سازه.</td>
             <td>طراحی متناسب با شیب و زوایای نامتقارن، استفاده از فضای مرده (Dead Space) زیر سازه.</td>
             <td>: زیر پله‌ها، زیر پلکان‌های بیرونی یا در حیاط‌های شیب‌دار.</td>
             <td>: زیر پله‌ها، زیر پلکان‌های بیرونی یا در حیاط‌های شیب‌دار.</td>
خط ۷۳: خط ۱۵۵:
       </table>
       </table>
     </div>
     </div>
  </div>
  <div class="toggle-container">
    <button class="btn-more" onclick="handleToggle()" id="actionBtn">مشاهده بقیه جدول</button>
   </div>
   </div>
</section>
</section>
<script>
function handleToggle() {
  const section = document.getElementById('mainSection');
  const btn = document.getElementById('actionBtn');
  if (section.classList.contains('is-collapsed')) {
    // باز کردن
    section.classList.remove('is-collapsed');
    btn.innerText = 'نمایش کمتر';
  } else {
    // بستن
    section.classList.add('is-collapsed');
    btn.innerText = 'مشاهده بقیه جدول';
    // اسکرول به بالای جدول برای تجربه بهتر کاربر
    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}
</script>
</html>
</html>

نسخهٔ کنونی تا ‏۲۶ ژوئیهٔ ۲۰۲۶، ساعت ۱۵:۲۸

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:جدول_اطلاعات_محصول/دماوند_پلیمر&oldid=4351»