پرسش

جدول با سربرگ ثابت و بدنه قابل اسکرول در بوت استرپ

Table with Fixed Header and Scrollable Body

سلام چطوری می‌تونم یه جدول با بوت استرپ ۵ بسازم که سربرگش ثابت بمونه و بدنه‌ اش قابل اسکرول باشه؟ هدفم اینه که وقتی کاربر اسکرول می‌کنه، فقط محتوای جدول اسکرول بشه و سربرگ سر جاش ثابت بمونه.

#table #bootstrap

1403/05/30

پاسخ

مهرشاد براتی

بیوگرافی مهرشاد براتی

سلام برای اینکه یه جدول با سربرگ ثابت و بدنه قابل اسکرول بسازی، می‌تونی از ترکیب ویژگی‌های CSS و کلاس‌های بوت استرپ استفاده کنی. اول، باید به جدول یه ارتفاع مشخص بدی و overflow رو روی auto تنظیم کنی تا بدنه جدول اسکرول بشه. برای اینکه سربرگ ثابت بمونه، از position: sticky استفاده می‌کنیم.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <title>Fixed Header Table</title>
    <style>
      .table-wrapper {
        height: 400px;
        overflow-y: auto;
      }
      .table th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <div class="table-wrapper">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>هدر 1 </th>
              <th>هدر 2</th>
              <th>هدر 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>دیتا 1</td>
              <td>دیتا 2</td>
              <td>دیتا 3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

این کد، یه جدول با سربرگ ثابت و بدنه قابل اسکرول ایجاد می‌کنه. ویژگی position: sticky باعث می‌شه که سربرگ جدول وقتی اسکرول می‌کنی، سر جای خودش باقی بمونه. همچنین، برای بهتر دیده شدن سربرگ، یه پس‌زمینه هم براش تنظیم کردیم.

پاسخ: 1403/05/30

آخرین آپدیت: 1403/07/15