خارج شدن تگهای a از جدول در بوت استرپ حین اسکرول کردن

پاسخ هوش مصنوعی

برای حل مشکل خارج شدن تگ های <a> از جدول در بوت استرپ حین اسکرول کردن، می توانید از CSS برای فیکس کردن هدر جدول و جلوگیری از افتادن آن روی محتوای دیگر استفاده کنید. به این صورت که هدر جدول را با استفاده از خاصیت position: sticky; ثابت کنید.

در زیر نمونه ای از کد CSS برای این کار آورده شده است:

.table thead th {
    position: sticky;
    top: 0;
    background-color: white; /* رنگ پس زمینه برای هدر */
    z-index: 100; /* برای اطمینان از اینکه هدر بر روی محتوای دیگر قرار گیرد */
}

با استفاده از این کد، هنگامی که شما جدول را اسکرول می کنید، هدر آن در بالای صفحه ثابت می ماند و بر روی محتوای زیر آن نمی افتد.

ببینید بهتر بود که کدهایی که برای Button ها نوشتید هم نمایش میدادید. البته سعی کنید کدهای خودتون رو از طریق دکمه مربوط به "کد" در ادیتور قرار بدید و از کدها عکس نذارید. چون اگر کسی بخواد پاسخ بده نمیتونه اینجوری کدهای شما رو کپی و پیست که و تست کنه. ولی این موضوع بسیار ساده هست. یک کد تستی برای نمایش جدول به همراه تگ a قرار میدم با این کد مقایسه کنید.

<div class="table-responsive">
   <table class="table table-bordered" style="background-color:white;">
       <thead>
           <tr style="font-size:14px; font-weight:bold; background-color:#c4bdbd;">
               <td style="width:60px;">ردیف</td>
               <td style="width:200px;">موضوع</td>
               <td>محتوای</td>
               <td style="width:120px;">عملیات</td>
           </tr>
       </thead>
       <tbody>
            @foreach (var item in Model)
               {
                  <tr style="font-size:13px;">
                      <td style="width:60px; text-align:center;">@counter</td>
                      <td style="text-align:right;">@item.Title</td>
                      <td style="text-align:right;">@item.Content</td>
                      <td>
                          <div class="row">
                              <a asp-controller="MyController" asp-action="MyAction"
                                        حذف
                              </a>
                         </div>
                      </td>
                   </tr>
                   counter++;
               }
         </tbody>
      </table>
</div>

شما همین کد رو در یک ویوی خالی تست کنید میبینید که به درستی جواب میده و بعد میتونید با کدهای خودتون مقایسه کنید.

بهتر بود کدهاتون رو میذاشتید که تست کنیم.

به هر حال فکر میکنم از position:sticky باشه که روی تگ های td گذاشتین.