>source

HTML 테이블이 있고 테이블 헤더가 많은 행이 있기 때문에 스크롤 할 때 스크롤 할 때 테이블 헤더를 끈적으로 작동 시키려고합니다. 그러나 작동하지 않습니다. 나는 헤더를 고정 된 위치에 붙이거나 체류 할 수 없게 될 수 없습니다. 내 테이블은 250 %의 너비가있는 고정 레이아웃을 가지고 있습니다. 현재 CSS를 망치지 않고 테이블 헤더를 끈적하게 만드는 방법에 대해 실제로 확실하지 않습니다. 감사합니다.

html

<section class="justify-content-center table-section">                                <table class="table" id="hwdashboard-table">                                    <thead>                                        <tr>                                            <th>ABC<th>                                             <th>ABC<th>                                              <th>ABC<th>                                               <th>ABC<th>                                                <th>ABC<th>                                                 <th>ABC<th>                                                  <th>ABC<th>                                        </tr>                                    </thead>                                    <tbody
                                        *ngFor="let x of (pagination ? (issues | FilterPipe: ticketNumber | paginate: {id: 'listing_pagination',itemsPerPage: itemsPerpage,currentPage: currentPage,totalItems: totalRec}) : (issues | FilterPipe: ticketNumber));let i=index;">                                        <tr data-toggle="collapse" [attr.data-target]="'#tablerow-'+i"
                                            class="accordion-toggle">                                           <td>{{x.1}}</td>                                            <td>{{x.2}}</td>                                            <td>{{x.3}}</td>                                            <td>{{x.4}}</td>                                            <td>{{x.5}}</td>                                            <td>{{x.6}}</td>                                            <td>{{x.7}}</td>                                            <td>{{x.8}}</td>                                            <td>{{x.9}}</td>                                        </tr>                                    </tbody>                                </table>                            </section>

CSS


table {
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    width: 250%;
    table-layout: fixed;
    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.2), 1px 2px 4px 1px rgba(0, 0, 0, 0%);
}
th {
    text-align: left;
    font-weight: 800;
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    background-color: #f0f0f0;
  position: sticky;
}
td {
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    border-bottom: solid 1px #a6a6a6;
    word-wrap: break-word;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
}
tr{
    cursor: pointer;
}
.table-section {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 20px;
}
thead{
  position: sticky;
}

  • 이전 Powershell과 JSON으로 일하는 약간의 도움을 원합니다.
  • 다음 엔터프라이즈 용 Windows In-Memory Cache