Я работаю над angular 11 и ng-bootstrap 9.1, и мне нужно сделать таблицу с фиксированными первыми 3 столбцами, и в то же время она тоже должна реагировать, я исправил ее, но не смог найти надежное решение для сделать его отзывчивым (пользовательский интерфейс ломается в некоторых моментах).
Я знаю, что этот вопрос похож на некоторые другие вопросы, например:
HTML-таблица с фиксированными заголовками и фиксированным столбцом?
Как создать HTML-таблицу с фиксированным/закрепленным левым столбцом и прокручиваемым телом?
Я ищу простое решение, например;
есть ли другие способы сделать это в 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;
}
В моем случае проблема заключалась в 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>