28
고정 된 (고정 된) 열과 헤더로 테이블을 만드는 방법을 웹에서 검색했습니다. 마침내 해결책을 찾은 다음 내 필요에 맞게 수정 한 것처럼 보입니다.고정 된 (고정 된) 열과 헤더가있는 HTML 테이블
원래 바이올린은 here입니다.
Here은 제 수정 된 솔루션입니다. Chrome (버전 : 55.0.2883.87 m) 및 Firefox (버전 : 51.0.1)에서 테스트했습니다.
문제는 완전히 IE (버전 : 11.0.9600.18427)에서 작동하지 않는다는 것입니다. 수평 스크롤하는 동안 헤더의 고정 된 부분도 스크롤됩니다. 누군가 IE에서 작동하도록 도와 줄 수 있습니까? 그리고 한 가지 더 질문 : 접근법을 사용하는 것이 안전한가요? 일부 명시되지 않은 동작을 사용하는 경우 향후 브라우저 또는 일부 최신 브라우저에서 내 표가 잘못된 방식으로 표시 될 수 있으며 몇 가지 다른 표가있는 안전한 솔루션을 사용하고 스크롤 위치와 행을 동기화하는 것이 좋습니다 신장. UPD : 질문 : 모바일 장치에서이 작업을 안정화하는 방법은 무엇입니까?
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
\t /*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain \t \t \t it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});.container {
height:200px;
width:400px;
overflow: hidden;
}
table {
position: relative;
background-color: #aaa;
border-collapse: collapse;
table-layout: fixed;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
}
thead th {
background-color: #99a;
min-width: 120px;
border: 1px solid #222;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
background-color: #88b;
}
/*tbody*/
tbody {
flex: 1;
position: relative;
display: block; /*seperates the tbody from the header*/
overflow: auto;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
background-color: #99a;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Name<br/>123</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age<br/>123<br/>321</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire<br/>123</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones<br/>123<br/>312</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian </td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
시도해보십시오. theadth : nth-child (1) {/ * 헤더의 첫 번째 셀 */ 위치 : 상대적; background-color : # 88b; display : 블록; } – Singh87
@ Singh87, 스크롤하는 동안 세포가 장소에 머무르는 데 도움이되지만 세포가 자동으로 높이를 조절하는 기능을 잃어 버립니다. –
DataTables - https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html을 고려해 보시기 바랍니다. 고정 행을 지원합니다. –