사실 그리드 레이아웃을 사용하면 완전히 다른 방식으로 CSS 테이블을 만들 수 있습니다. 그리드를 만드는 방법을 파악하려고했습니다. 첫 번째 행이보기로 유지되고 나머지는 스크롤됩니다. 중요하게 그리드 동작을 잃지 않고 (내용이 많은 '셀'은 스크롤 할 수없는 첫 번째 행을 포함하여 전체 열 및/또는 행의 너비 및/또는 높이를 변경해야 함)그리드 레이아웃을 사용하여 고정/고정 헤더가있는 테이블을 만들 수 있습니까?
이것이 가능합니까?
는 최근 @Nicolas CHEVOBBE에서이 codepen에 온 :
https://codepen.io/nchevobbe/pen/bYZEqq?editors=0110
그것은 당신이 무엇을 설명의 예를 보여줍니다. 격자 레이아웃을 사용하여 고정 머리글 행. 다른 방법으로 코드를 작성하는 데 많은 노력을 필요로하는 기능은 매우 간단합니다.
필수적인 부분
헤더 셀에 위치sticky을 사용하고 있습니다 :
[role=columnheader] {
background-color: #F9F9FA;
position: sticky;
top: 0;
padding: 5px;
border-bottom: 1px solid #E3E4E4;
}
는 도움이되기를 바랍니다.
최소한이 코드는 직접 작성해야합니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –
@Paulie_D 그렇다면 어떻게 그리드 레이아웃에서 그리드를 만들 수 있습니까? 내가 한 Google 검색 목록을 만들어야합니까? 제 말은, 제가 저 rep 사용자 인 것을 압니다. 그러나 지금까지 나는 단지 답변을 썼고, 나는 그들이 코드 작성 서비스로 그렇게 생각하지 않는다고 생각합니다. 이 질문은 '어떤 것을 성취하기 위해이 기본 요소를 사용할 수 있습니까?'라는 회선을 따르고 있습니다. 그 대답은 그리드 레이아웃에 대한 내 이해에 근거하지 않을 가능성이 높습니다. – user2908232
솔직히 말해서, 나는 이것이 (Google 검색을 기반으로) 시도되기 전에 시도되지 않았거나 완전히 불가능하다고 다소 확신합니다. 그리드 레이아웃에 대한 내 자신의 이해만큼이나 불가능하지만, 이것이 HTML 테이블의 주요 문제점 중 하나 였고 그리드 레이아웃은 그리드 (테이블의 수퍼 세트)의 주요 문제점을 해결하기로되어있다. 이 문제가 해결되었는지 여부를 묻는 것은 매우 합리적인 것 같습니다. – user2908232