고정 된 머리글과 고정 된 첫 번째 열이있는 html 테이블 (또는 비슷한 모양)을 만들어야합니다.
지금까지 본 모든 솔루션은 Javascript를 사용하거나 jQuery
scrollTop / scrollLeft를 설정하지만 모바일 브라우저에서는 원활하게 작동하지 않으므로 순수한 CSS 솔루션을 찾고 있습니다.
여기에서 고정 열에 대한 해결책을 찾았습니다. jsfiddle.net/C8Dtf/20/ 하지만 난 너무 고정 된 헤더를 만들을 향상시킬 수있는 방법을 모르겠어요.
웹킷 브라우저에서 작동하거나 일부 css3
기능을 사용하고 싶지만 반복합니다. 사용하고 싶지 않습니다.Javascript
합니다. 스크롤 .
편집 : 이것은 내가 달성하려는 동작의 예입니다 : https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html
답변
고정 헤더 행과 첫 번째 열이있는 실제 순수 CSS 솔루션
순수한 CSS를 사용하여 고정 된 헤더와 고정 된 첫 번째 열이 모두있는 테이블을 만들어야했는데 여기에 내가 원하는 답변은 없었습니다.
이 position: sticky
속성은 Chrome, Firefox 및 Edge의 최신 버전에서 상단 (가장 많이 사용했듯이)과 측면을 모두 지원합니다. 이것은와 결합 될 수 div
를 가지overflow: scroll
페이지의 어느 곳에 나 배치 할 수있는 고정 헤더가있는 테이블을 제공 속성 할 수 있습니다.
테이블을 컨테이너에 넣으십시오.
<div class="container">
<table></table>
</div>
사용 overflow: scroll
스크롤 수 있도록 컨테이너를에 :
div.container {
overflow: scroll;
}
로 그마는 의견에서 지적, 용기도 필요 max-width
하고를 max-height
.
사용 position: sticky
가장자리에 테이블 셀을 가지고 스틱과 top
, right
또는 left
스틱에있는 가장자리를 선택합니다 :
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
로 MarredCheese 코멘트에서 언급 한 첫 번째 열이 포함되어있는 경우, <td>
대신의 요소 <th>
요소를, 당신은 사용할 수 있습니다tbody td:first-child
당신의 CSS 대신의tbody th
첫 번째 열의 헤더를 왼쪽에 고정하려면 다음을 사용하세요.
thead th:first-child {
left: 0;
z-index: 1;
}
답변
요즘이 가능 하여 달성하기 위해 단지 CSS를 가진 position: sticky
속성입니다.
다음은 스 니펫입니다.
(jsFiddle : https://jsfiddle.net/hbqzdzdt/5/ )
.grid-container {
display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
overflow: auto;
height: 300px;
width: 600px;
}
.grid {
display: flex;
flex-wrap: nowrap;
}
.grid-col {
width: 150px;
min-width: 150px;
}
.grid-item--header {
height: 100px;
min-height: 100px;
position: sticky;
position: -webkit-sticky;
background: white;
top: 0;
}
.grid-col--fixed-left {
position: sticky;
left: 0;
z-index: 9998;
background: white;
}
.grid-col--fixed-right {
position: sticky;
right: 0;
z-index: 9998;
background: white;
}
.grid-item {
height: 50px;
border: 1px solid gray;
}
<div class="grid-container">
<div class="grid">
<div class="grid-col grid-col--fixed-left">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col grid-col--fixed-right">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
</div>
</div>
</div>
호환성에 관해서. 모든 주요 브라우저에서 작동하지만 IE에서는 작동하지 않습니다. polyfill이 position: sticky
있지만 시도한 적이 없습니다.
답변
이것은 쉬운 일이 아닙니다.
다음 링크는 작동하는 데모에 대한 것입니다.
lanoxx의 의견에 따라 업데이트 된 링크
http://jsfiddle.net/C8Dtf/366/
다음을 추가하는 것을 잊지 마십시오.
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
나는 이것을 달성하는 다른 방법을 보지 못합니다. 특히 CSS 만 사용하는 것은 아닙니다.
이것은 겪을 것이 많습니다. 도움이 되었기를 바랍니다 🙂
답변
이러한 제안은 모두 훌륭하지만 모두가 아니라 머리글이나 열 중 하나만 수정하거나 자바 스크립트를 사용하고 있습니다. 그 이유는 순수한 CSS로 할 수 있다고 믿지 않습니다. 이유:
가능하다면 여러 스크롤 가능한 div를 서로 다른 방향으로 스크롤하는 여러 개의 스크롤 가능한 div를 서로 중첩해야합니다. 그런 다음 테이블을 고정 헤더, 고정 열 및 나머지 데이터의 세 부분으로 분할해야합니다.
좋아. 하지만 이제 문제는 스크롤 할 때 둘 중 하나를 그대로 두도록 할 수 있지만 다른 하나는 첫 번째 스크롤 영역 안에 중첩되어 있으므로 눈에 띄지 않게 스크롤 될 수 있으므로 제자리에 고정 할 수 없습니다. 화면. ‘아하’당신은 ‘하지만 나는 그것을하기 위해 어떻게 든 절대 또는 고정 된 위치를 사용할 수있다’라고 말한다-당신은 할 수 없다. 그렇게하면 해당 컨테이너를 스크롤 할 수 없게됩니다. 그것은 닭고기와 달걀의 상황입니다. 둘 다 가질 수는 없으며 서로를 취소합니다.
유일한 해결책은 자바 스크립트를 통하는 것입니다. 세 가지 요소를 완전히 분리하고 자바 스크립트를 통해 위치를 동기화해야합니다. 이 페이지의 다른 게시물에 좋은 예가 있습니다. 이것은 또한 볼 가치가 있습니다.
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
답변
jsfiddle에서 약간 변경했습니다. 이것은 당신이하려는 것일 수 있습니다.
다음과 같이 제목을 하드 코딩했습니다.
<table id="left_table" class="freeze_table">
<tr class='tblTitle'>
<th>Title 1</th>
<th>Title 2</th>
</tr>
</table>
그리고 몇 가지 스타일도 추가했습니다.
.tblTitle{
position:absolute;
top:0px;
margin-bottom:30px;
background:lightblue;
}
td, th{
padding:5px;
height:40px;
width:40px;
font-size:14px;
}
이것이 당신이 원하는 것입니다 🙂
답변
CSS 만 사용하는 예 :
.table {
table-layout: fixed;
width: 500px;
border-collapse: collapse;
}
.header th {
font-family: Calibri;
font-size: small;
font-weight: lighter;
border-left: 1px solid #000;
background: #d0d0d0;
}
.body_panel {
display: inline-block;
width: 520px;
height: 300px;
overflow-y: scroll;
}
.body tr {
border-bottom: 1px solid #d0d0d0;
}
.body td {
border-left: 1px solid #d0d0d0;
padding-left: 3px;
font-family: Calibri;
font-size: small;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<body>
<table class="table">
<thead class="header">
<tr>
<th style="width:20%;">teste</th>
<th style="width:30%;">teste 2</th>
<th style="width:50%;">teste 3</th>
</tr>
</thead>
</table>
<div class="body_panel">
<table class="table">
<tbody class="body">
<tr>
<td style="width:20%;">asbkj k kajsb ksb kabkb</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
</tbody>
</table>
</div>
</body>
답변
문제에 대한 Paul O’Brien의 훌륭한 솔루션을 찾았으며 링크를 공유하고 싶습니다 :
https://codepen.io/paulobrien/pen/LBrMxa
바닥 글 스타일을 제거했습니다.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.intro {
max-width: 1280px;
margin: 1em auto;
}
.table-scroll {
position: relative;
width:100%;
z-index: 1;
margin: auto;
overflow: auto;
height: 350px;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
}
.table-scroll thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
thead th:first-child {
z-index: 5;
}