Как создать HTML-таблицу, реагирующую на запросы, с первыми тремя фиксированными/замороженными левыми столбцами и прокручиваемым телом в angular 11?

Я работаю над angular 11 и ng-bootstrap 9.1, и мне нужно сделать таблицу с фиксированными первыми 3 столбцами, и в то же время она тоже должна реагировать, я исправил ее, но не смог найти надежное решение для сделать его отзывчивым (пользовательский интерфейс ломается в некоторых моментах).

Я знаю, что этот вопрос похож на некоторые другие вопросы, например:

Я ищу простое решение, например;

  • есть ли другие способы сделать это в angular или ng-bootstrap?

  • или есть ли какой-нибудь способ, который в значительной степени защищает от дурака?

нельзя добавлять внешние зависимости или что-то еще.

Html в компоненте для создания таблицы

<div class = "row mb-2 view" *ngIf = "value1.length">
    <div class = "col-md-12 mb-2 wrapper" style = "max-height: 65vh; overflow-y: auto;">
        <table class = "bg-white roundedCorner table-sm table table-bordered">
            <tr class = "font-weight-bolder text-monospace" style = "background-color: aliceblue; font-size: 1em;">
                <th class = "text-center align-middle sticky-col check-box" rowspan = "2" *ngIf = "####" >                                 <input type = "checkbox" [(ngModel)] = "checkAll" (click) = "fnCall($event)">                             </th>
                <th rowspan = "2" class = "text-center align-middle sticky-col first-col" [ngStyle] = "{'left': lockMode?'80px':'0px'}" style = "background-color: aliceblue;">                                 Chest Number                               </th>
                <th  rowspan = "2" class = "text-center align-middle sticky-col  second-col"  [ngStyle] = "{'left': lockMode?'180px':'100px'}" style = "background-color: aliceblue;">                                 Project Name                             </th>
                <th  [attr.colspan] = "rubrics.length" class = "text-center align-middle">                                 Rubrics                             </th>
                <th class = "text-center align-middle"rowspan = "2" style = "max-width: 80px;">                                 Total Mark                             </th>
                <th class = "text-center align-middle" rowspan = "2">                                 Remarks                             </th>
            </tr>
            <tr class = "text-monospace text-center align-middle font-italic font-bold" style = "background-color: azure;" >
                <th *ngFor = "let rubric of rubrics">                                     {{ rubric.rubricName }} ({{rubric.maxMark}})                                </th>
            </tr>
        </table>
    </div>
</div>

css код, который я использовал, чтобы исправить это


.view {
    margin: auto;
    width: auto;
    border-collapse: separate;
        border-spacing: 0;
  }
.wrapper {
    position: relative;
    overflow: auto;
    white-space: nowrap;
  }
  
  .sticky-col {
    position: -webkit-sticky;
    position: sticky;
  }
  
  .first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
  }
  
  .second-col {
    width: 20vw;
    min-width: 20vw;
    max-width: 20vw;
  }
  .check-box {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    left: 0px;
  }
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
74
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В моем случае проблема заключалась в CSS и встроенных стилях; вместо того, чтобы добавлять классы для каждого столбца, который мне нужен, я использовал :nth-child() для первых двух столбцов и добавил встроенные стили на основе условий для этого, очевидно, я использовал ng-style для решения условия. Итак, код будет таким: -

/* CSS */  
  th:first-child, td:first-child{
    position: sticky;
    left: -1px;
    width: 40px;
  }

  td:nth-child(2), th:nth-child(2){
    position: sticky;
  }
<!--HTML-->
<tr class = "font-weight-bolder text-monospace " style = "background-color: aliceblue; font-size: 1em;">
   <th class = "text-center align-middle " style = "background-color: aliceblue; z-index: 33" rowspan = "2" *ngIf = "lockMode">
  <input type = "checkbox" [(ngModel)] = "checkAll" (click) = "selectAllProjectsCheckChange($event)">
   </th>
   <th rowspan = "2" class = "text-center align-middle " [ngStyle] = "{'left': lockMode? '20px' :'0px'}" style = "background-color: aliceblue; z-index: 33;">
  Chest Number
   </th>
   <th  rowspan = "2" class = "text-center align-middle" [ngStyle] = "{'left': lockMode?'76px':'55px'}"  style = "background-color: aliceblue; position: sticky; z-index: 33">
  Project Name
   </th>
</tr>
<tr class = "text-center align-middle sticky-col" *ngFor = "let project of projectMappings">
   <!-- *ngIf = "project.pending" -->
   <ng-container *ngIf = "isShowPendingEnabled? !project.isValid : true">
  <td class = "text-center align-middle" *ngIf = "lockMode" style = "z-index: 33 ; background-color: white;">
     <input type = "checkbox" [disabled] = "project.judgeDetails.status? project.judgeDetails.status === 'locked': false" [checked] = "(project.judgeDetails.status? project.judgeDetails.status === 'locked': false) || checkLockValid(project._id)" (click) = "projectLockCheckboxChange(project)">
  </td>
  <td class = "text-center align-middle" style = "z-index: 33 ; background-color: white;" [ngStyle] = "{'left': lockMode?'20px':'0px'}">
     {{ project.chestNumber? project.chestNumber : 'N/A'}}
  </td>
  <td class = "text-center align-middle" style = "z-index: 33 ; background-color: white; position: sticky;" [ngStyle] = "{'left': lockMode?'76px':'55px'}" >
     {{ project.projectName }}
  </td>
   </ng-container>
</tr>

   

Другие вопросы по теме