HTML 테이블의 맨 위 행만 고정(고정 테이블 머리글 스크롤)
맨 위 행이 고정된 html 테이블을 만들고 싶습니다(수직으로 스크롤하면 항상 볼 수 있습니다).
자바스크립트 없이 이것을 실현할 수 있는 영리한 방법이 있습니까?
왼쪽 열을 고정할 필요가 없습니다.
이것이 몇 가지 답을 가지고 있다는 것을 알지만, 이것들 중 어느 것도 저에게 도움이 되지 않았습니다.나는 왜 나의 것인지 설명하는 이 기사를 발견했습니다.sticky예상대로 작동하지 않았습니다.
기적으사수없다니습할용을 사용할 수 .position: sticky;<thead>또는<tr>요소들.단, 다음에 사용할 수 있습니다.<th>.
작동하기 위해 필요한 최소 코드는 다음과 같습니다.
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
테이블을 상대적으로 설정한 상태에서<th>상단이 0인 상태에서 스틱으로 설정할 수 있습니다.
참고: 테이블을 최대 높이의 디브로 감아야 합니다.
<div id="managerTable" >
...
</div>
위치:
#managerTable {
max-height: 500px;
overflow: auto;
}
이것을 고정 머리글 스크롤이라고 합니다.문서화된 접근 방식은 다음과 같습니다.
http://www.imaputz.com/cssStuff/bigFourVersion.html
자바스크립트 없이는 효과적으로 해낼 수 없습니다...특히 교차 브라우저 지원을 원하는 경우.
특히 크로스 브라우저/버전 지원과 관련하여 사용자가 취하는 접근 방식에는 여러 가지 문제가 있습니다.
편집:
수정하려는 헤더가 아니라 데이터의 첫 번째 행이더라도 개념은 동일합니다.저는 당신이 언급했던 100%가 아니었습니다.
회사로부터 IE7+, Firefox 및 Chrome에서 작동할 수 있는 솔루션을 연구하라는 과제를 받았습니다.
여러 달 동안의 탐색, 시도, 좌절 끝에 그것은 정말 근본적인 문제로 귀결되었습니다.대부분의 솔루션에서는 데이터가 포함된 두 번째 테이블 위에 부동하여 제자리에 유지되는 두 번째 테이블에 대한 두 개의 별도 테이블을 사용해야 하므로 고정 높이/폭 열을 구현해야 합니다.
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
대안적인 접근법 중 하나는 tbody와 광고 태그를 활용하는 것이지만 IE가 tbody에 스크롤 막대를 설치하는 것을 허용하지 않기 때문에 결함이 있습니다. 이는 사용자가 tbody의 높이를 제한할 수 없다는 것을 의미합니다.
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
이 접근 방식은 테이블이 너무 귀여워서 브라우저마다 계산에 따라 픽셀을 다르게 할당할 수 없고 모든 경우에 완벽한 분포를 보장할 수 없기 때문에 정확한 픽셀 폭을 보장하는 것과 같은 많은 문제가 있습니다.테이블 내에 테두리가 있으면 분명해집니다.
저는 당신이 이 보장을 할 수 없기 때문에 다른 접근법을 사용하여 스크루 테이블이라고 말했습니다.저는 테이블을 모방하기 위해 div를 사용했습니다.이는 행과 열을 배치하는 데에도 문제가 있습니다(주로 플로팅에 문제가 있기 때문에 인라인 블록을 사용하면 IE7에서 작동하지 않으므로 절대 위치 지정을 사용하여 올바른 위치에 배치해야 했습니다).
슬릭 그리드를 만든 사람이 있습니다. 슬릭 그리드는 저와 매우 유사한 접근 방식을 가지고 있고 여러분은 이를 달성하기 위한 좋은 (복잡하지만) 예를 사용할 수 있습니다.
https://github.com/6pac/SlickGrid/wiki
Pure CSS Scrollable Table with Fixed Header에 따르면 DEMO를 작성하여 헤더를 쉽게 고정할 수 있도록 설정하였습니다.overflow:auto몸에.
table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}
저의 관심사는 폭이 고정된 셀이 없는 것이었습니다.어떤 경우에도 효과가 없는 것처럼 보였습니다.저는 제가 필요한 것처럼 보이는 이 해결책을 찾았습니다.방법을 찾고 있는 다른 사람들을 위해 여기에 게시합니다.이 바이올린 좀 보세요.
작업 코드 조각:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>CSS를 사용할 수 있습니다.position: sticky;표의 첫 번째 행의 경우 MDN 참조:
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
당신은 표제와 표제에 두 개의 디브를 사용할 수 있습니다.그 다음에 사용
#headings {
position: fixed;
top: 0px;
width: 960px;
}
@ptriek가 말했듯이 이것은 고정 너비 열에만 작동할 것입니다.
다음을 사용하여 가능합니다.position:fixed에<th>(<th>맨 위 행임).
Chromatable jquery 플러그인은 백분율(%)이 허용되는 고정 헤더(또는 맨 위 행)를 허용하며 100%만 허용합니다.
http://www.chromaloop.com/posts/chromatable-jquery-plugin
자바스크립트 없이 어떻게 이걸 할 수 있었는지 생각이 안 나요.
업데이트: 새 링크 -> http://www.jquery-plugins.info/chromatable-00012248.htm
사용자:
tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}
저는 부트스트랩 css col-md-xx를 사용하여 열 너비를 정의합니다.열 너비를 정의하지 않으면 의 자동 너비가 와 일치하지 않습니다.102%는 오버플로로 인해 스패프를 잃기 때문입니다.
CSS 제브라 스타일링 사용
이 예를 복사하여 붙여넣고 머리글이 고정된 것을 확인합니다.
<style>
.zebra tr:nth-child(odd){
background:white;
color:black;
}
.zebra tr:nth-child(even){
background: grey;
color:black;
}
.zebra tr:nth-child(1) {
background:black;
color:yellow;
position: fixed;
margin:-30px 0px 0px 0px;
}
</style>
<DIV id= "stripped_div"
class= "zebra"
style = "
border:solid 1px red;
height:15px;
width:200px;
overflow-x:none;
overflow-y:scroll;
padding:30px 0px 0px 0px;"
>
<table>
<tr >
<td>Name:</td>
<td>Age:</td>
</tr>
<tr >
<td>Peter</td>
<td>10</td>
</tr>
</table>
</DIV>
"고정 위치"이고 -30px의 여백으로 형식이 지정된, 제거된 데이터 엣트리의 첫 번째 행에 의해 사용되는 디비브 레프트 공간에서 30px의 상단 패딩에 주목합니다.
언급URL : https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling
'programing' 카테고리의 다른 글
| FileDialog를 사용하여 워크북을 열고 Excel VBA에서 조작합니다. (0) | 2023.08.29 |
|---|---|
| spring-boot-maven-plugin과 maven-compiler-plugin의 차이점은 무엇입니까? (0) | 2023.08.29 |
| 루트가 아닌 다른 사용자로 도커 컨테이너에 연결 (0) | 2023.08.29 |
| git: 메시지를 입력하는 도중 커밋 (0) | 2023.08.29 |
| 리피터의 링크 버튼에 대한 비동기 포스트백 트리거를 수행하는 방법 (0) | 2023.08.29 |