반응형
고정/고정 왼쪽 열과 스크롤 가능한 본문으로 HTML 테이블을 만들려면 어떻게 해야 합니까?
간단한 해결책이 필요합니다.다음과 같은 다른 질문과 유사하다는 것을 알고 있습니다.
하지만 저는 하나의 왼쪽 열만 고정하면 되고 간단하고 스크립트가 없는 솔루션을 선호합니다.
에는 "" "" "" "" "" " " " " " "를 선택할 수 .position: absolute 열 너비를 명시적으로 을 선택한 다음 를 첫번및열째(명너를로으지정시적감다싼다음그), ▁an▁in▁the▁the로 감싼다.overflow-x: scrollIE7에서 이걸 시도할 필요는 없습니다만...
관련 HTML 및 CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>사용할 수 있습니다.sticky위치. 샘플 여기 샘플 코드가 있습니다.HTML/CSS 솔루션입니다..js는 필요합니다.
.view {
margin: auto;
width: 600px;
}
.wrapper {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}
.sticky-col {
position: -webkit-sticky;
position: sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100px;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 100px;
}<div class="view">
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th class="sticky-col first-col">Number</th>
<th class="sticky-col second-col">First Name</th>
<th>Last Name</th>
<th>Employer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">1</td>
<td class="sticky-col second-col">Mark</td>
<td>Ham</td>
<td>Micro</td>
</tr>
<tr>
<td class="sticky-col first-col">2</td>
<td class="sticky-col second-col">Jacob</td>
<td>Smith</td>
<td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
</tr>
<tr>
<td class="sticky-col first-col">3</td>
<td class="sticky-col second-col">Larry</td>
<td>Wen</td>
<td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
</tr>
</tbody>
</table>
</div>
</div>코드플라이 코드: https://www.codeply.com/p/oZ4NjpvwbO
2017년 이후 출시된 대부분의 브라우저:
당신은 할 수 .position: stickyhttps://caniuse.com/ #http=http-http://▁see 를 참조하십시오.
고정 너비 열은 필요 없습니다.
아래 코드 조각을 실행하여 작동 방식을 확인하십시오.
.tscroll {
width: 400px;
overflow-x: scroll;
margin-bottom: 10px;
border: solid black 1px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #ddd;
}
.tscroll td, .tscroll th {
border-bottom: dashed #888 1px;
}<html>
<div class="tscroll">
<table>
<thead>
<tr>
<th></th>
<th colspan="5">Heading 1</th>
<th colspan="8">Heading 2</th>
<th colspan="4">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>10:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>11:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>12:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>13:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>14:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>15:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>16:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>17:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
</tbody>
</table>
</div>이것은 고정 헤더 및/또는 열을 만드는 흥미로운 jQuery 플러그인입니다.데모 페이지에서 고정 열을 참으로 전환하여 작동 상태를 확인합니다.
고정 너비 왼쪽 열의 경우 Eamon Nerbonne이 최상의 솔루션을 제공합니다.
왼쪽 열 너비가 가변적인 경우 가장 좋은 해결책은 동일한 테이블 두 개를 만들고 위에 하나를 누르는 것입니다.데모: http://jsfiddle.net/xG5QH/6/ .
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
칸은 첫번열만수있다습니들을째▁the▁make로 하면 됩니다.position: sticky; z-index: 9그러면 열/행이 현재 위치로 고정됩니다.여기서 내 예제 코드펜을 확인하십시오. https://codepen.io/swastikmishra/pen/zYYdKBQ
HTML 예제
table {
text-align: center;
}
.table-container {
width: 500px;
height: 300px;
overflow: scroll;
}
table th,
table td {
white-space: nowrap;
padding: 10px 20px;
font-family: Arial;
}
table tr th:first-child,
table td:first-child {
position: sticky;
width: 100px;
left: 0;
z-index: 10;
background: #fff;
}
table tr th:first-child {
z-index: 11;
}
table tr th {
position: sticky;
top: 0;
z-index: 9;
background: #fff;
}<div class="table-container">
<table>
<tr>
<th>Hello World</th>
<th>Hello World</th>
<th>Hello World</th>
<th>Hello World</th>
<th>Hello World</th>
<th>Hello World</th>
<th>Hello World</th>
</tr>
<tr>
<td>H11</td>
<td>H12</td>
<td>H13</td>
<td>H14</td>
<td>H15</td>
<td>H16</td>
<td>H17</td>
</tr>
<tr>
<td>H21</td>
<td>H22</td>
<td>H23</td>
<td>H24</td>
<td>H25</td>
<td>H26</td>
<td>H27</td>
</tr>
<tr>
<td>H31</td>
<td>H32</td>
<td>H33</td>
<td>H34</td>
<td>H35</td>
<td>H36</td>
<td>H37</td>
</tr>
<tr>
<td>H41</td>
<td>H42</td>
<td>H44</td>
<td>H44</td>
<td>H45</td>
<td>H46</td>
<td>H47</td>
</tr>
<tr>
<td>H51</td>
<td>H52</td>
<td>H54</td>
<td>H54</td>
<td>H55</td>
<td>H56</td>
<td>H57</td>
</tr>
<tr>
<td>H61</td>
<td>H62</td>
<td>H64</td>
<td>H64</td>
<td>H65</td>
<td>H66</td>
<td>H67</td>
</tr>
<tr>
<td>H71</td>
<td>H72</td>
<td>H74</td>
<td>H74</td>
<td>H75</td>
<td>H76</td>
<td>H77</td>
</tr>
<tr>
<td>H81</td>
<td>H82</td>
<td>H84</td>
<td>H84</td>
<td>H85</td>
<td>H86</td>
<td>H87</td>
</tr>
</table>
</div>조금 늦었지만 스스로 해결책을 시도할 때 이 스레드를 우연히 발견했습니다.당신이 요즘 최신 브라우저를 사용하고 있다고 가정했을 때, 저는 CSS calc()를 사용하여 너비가 충족되도록 보장하는 솔루션을 생각해냈습니다.
.table-fixed-left table,
.table-fixed-right table {
border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
border: 1px solid #ddd;
padding: 5px 5px;
}
.table-fixed-left {
width: 120px;
float: left;
position: fixed;
overflow-x: scroll;
white-space: nowrap;
text-align: left;
border: 1px solid #ddd;
z-index: 2;
}
.table-fixed-right {
width: calc(100% - 145px);
right: 15px;
position: fixed;
overflow-x: scroll;
border: 1px solid #ddd;
white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
padding: 5px 10px;
}<div class="table-fixed-left">
<table>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Header with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
</table>
</div>
<div class="table-fixed-right">
<table>
<tr>
<th>Header</th>
<th>Another header</th>
<th>Header</th>
<th>Header really really really really long</th>
</tr>
<tr>
<td>Info Long</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</table>
</div>이것이 누군가에게 도움이 되기를 바랍니다!
왼쪽 열에 스타일 지정position: fixed (아마도사싶것다입니을고하용다▁(아것)를 사용하고 top그리고.left스타일을 사용하여 정확한 위치를 제어할 수 있습니다.)
저는 Earmon Nerbonne의 답변을 받아 전체 너비를 채우는 테이블로 작업하기 위해 편집했습니다.
<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
.headcol:before {
content:'Row ';
}
.long {
background:yellow;
letter-spacing:1em;
}
</style></head><body>
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div></div>
</body></html>
그러나 고정 열의 너비는 여전히 설정된 값이어야 합니다.
좀 더 복잡한 것을 개발 중이고 여러 개의 열을 왼쪽으로 고정/고정하려면 다음과 같은 것이 필요합니다.
.wrapper {
overflow-x: scroll;
}
td {
min-width: 50px;
}
.fixed {
position: absolute;
background: #aaa;
}<div class="content" style="width: 400px">
<div class="wrapper" style="margin-left: 100px">
<table>
<thead>
<tr>
<th class="fixed" style="left: 0px">aaa</th>
<th class="fixed" style="left: 50px">aaa2</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed" style="left: 0px">aaa</td>
<td class="fixed" style="left: 50px">aaa2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td class="fixed" style="left: 0">bbb</td>
<td class="fixed" style="left: 50px">bbb2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tbody>
</table>
</div>
</div>만약 당신이 웹 개발자의 지옥에 있고 IE6에서 이 일을 할 필요가 있다면, 내가 사용한 샘플 코드는 다음과 같습니다.
<html>
<head>
<style type="text/css">
.fixme {
position: relative;
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
</table>
</body>
</html>
이것은 아마도 IE6에서만 작동할 것이므로 CSS에 대해 조건부 주석을 사용합니다.
플러그인을 추가할 필요가 없습니다. CSS는 이 작업을 수행할 수 있습니다!
이 아이디어는 각 열의 모든 첫 번째 셀의 위치를 절대적으로 만들고 너비를 고정하는 것입니다.예:
max-width: 125px;
min-width: 125px;
position: absolute;
이렇게 하면 일부 열의 일부가 첫 번째 열 아래에 숨겨지므로 첫 번째 열과 너비가 같은 빈 두 번째 열(두 번째 빈 td 추가)을 추가합니다.
테스트를 해봤는데 크롬과 파이어폭스에서 작동합니다.
이몬 네르본, 나는 당신의 코드에서 몇몇 css를 바꿨고 지금은 더 좋습니다(스크롤 바는 첫 번째 행부터 시작합니다).
두 줄만 추가합니다.
.div : padding-left:5em;
.headcol : background-color : #fff;
다음은 가장 일반적인 답변의 또 다른 수정 사항이지만 첫 번째 열 레이블의 텍스트 길이를 처리하는 경우입니다. http://jsfiddle.net/ozx56n41/
기본적으로 두 번째 열은 언급한 대로 행 높이를 만드는 데 사용합니다.하지만 제 바이올린은 위에 언급된 대부분의 바이올린과는 다르게 작동합니다.
HTML:
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol"><div>This is a long label</div></td>
<td class="hiddenheadcol"><div>This is a long label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol"><div>Short label</div></td>
<td class="hiddenheadcol"><div>Short label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>
</div>
CSS:
body {
font: 16px Calibri;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
border-top: 1px solid grey;
}
#innerdiv {
overflow-x: scroll;
margin-left: 100px;
overflow-y: visible;
padding-bottom: 1px;
}
table {
border-collapse:separate;
}
td {
margin: 0;
border: 1px solid grey;
border-top-width: 0;
border-left-width: 0px;
padding: 10px;
}
td.headcol {
/* Frozen 1st column */
position: absolute;
left: 0;
top: auto;
border-bottom-width: 1px;
padding: 0;
border-left-width: 1px;
}
td.hiddenheadcol {
/* Hidden 2nd column to create height */
max-width: 0;
visibility: hidden;
padding: 0;
}
td.headcol div {
/* Text container in the 1st column */
width: 100px;
max-width: 100px;
background: lightblue;
padding: 10px;
box-sizing: border-box;
}
td.hiddenheadcol div {
/* Text container in the 2nd column */
width: 100px;
max-width: 100px;
background: red;
padding: 10px;
}
td.long {
background:yellow;
letter-spacing:1em;
}
저에게 완벽하게 작동하는 것은 이것뿐이었습니다. (폴 오브라이언 덕분입니다!)https://codepen.io/paulobrien/pen/gWoVzN
다음은 스니펫입니다.
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
}); .table-scroll {
position:relative;
max-width:600px;
margin:auto;
overflow:hidden;
border:1px solid #000;
}
.table-wrap {
width:100%;
overflow:auto;
}
.table-scroll table {
width:100%;
margin:auto;
border-collapse:separate;
border-spacing:0;
}
.table-scroll th, .table-scroll td {
padding:5px 10px;
border:1px solid #000;
background:#fff;
white-space:nowrap;
vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
background:#f9f9f9;
}
.clone {
position:absolute;
top:0;
left:0;
pointer-events:none;
}
.clone th, .clone td {
visibility:hidden
}
.clone td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
color:red;
}
.clone .fixed-side {
border:1px solid #000;
background:#eee;
visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
<th scope="col">Header 6</th>
<th scope="col">Header 7</th>
<th scope="col">Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content<br>
test</td>
<td><a href="#">Cell content longer</a></td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="fixed-side"> </th>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
<td>Footer 8</td>
</tr>
</tfoot>
</table>
</div>
</div>
<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>.div1 {
width: 600px;
height: 400px;
overflow: scroll;
border: 1px solid #777777;
}
.div1 table {
border-spacing: 0;
}
.div1 th {
border-left: none;
border-right: 1px solid #bbbbbb;
padding: 5px;
width: 80px;
min-width: 80px;
position: sticky;
top: 0;
background: #727272;
color: #e0e0e0;
font-weight: normal;
}
.div1 td {
border-left: none;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
padding: 5px;
width: 80px;
min-width: 80px;
}
.div1 th:nth-child(1),
.div1 td:nth-child(1) {
position: sticky;
left: 0;
width: 150px;
min-width: 150px;
}
.div1 th:nth-child(2),
.div1 td:nth-child(2) {
position: sticky;
/* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
/* 0 + 5 + 150 + 5 + 1 */
left: 161px;
width: 50px;
min-width: 50px;
}
.div1 td:nth-child(1),
.div1 td:nth-child(2) {
background: #ffebb5;
}
.div1 th:nth-child(1),
.div1 th:nth-child(2) {
z-index: 2;
}
HTML,
<div class="div1">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<td>Row Data 1</td>
<td>Row Data 2</td>
<td>Row Data 3</td>
<td>Row Data 4</td>
<td>Row Data 5</td>
<td>Row Data 6</td>
</tr>
<tr>
<td>Row Data 1</td>
<td>Row Data 2</td>
<td>Row Data 3</td>
<td>Row Data 4</td>
<td>Row Data 5</td>
<td>Row Data 6</td>
</tr>
</table>
</div>
유튜브 비디오 워크스루: https://www.youtube.com/watch?v=_dpSEjaKqSE
예 1: 고정 너비 및 높이
https://adriancs.com/demo/freeze_table_column_row.html
예 2: 반응 폭 및 높이(뷰포트를 사용하여 조정)
https://adriancs.com/html-css-js/298/html-table-freeze-row-and-column-with-css/
전체 자습서 설명:
https://adriancs.com/demo/freeze_table_column_row_responsive_viewport.html
제가 맥에서 테스트했을 때 오페라는 모든 이전 답변에 대해 버그가 있었습니다.테이블을 스크롤하면 고정되지 않은 첫 번째 열을 통과한 후 고정 열이 사라집니다.제가 먼저 아래 코드를 작성했습니다.로컬로 설치한 모든 브라우저에서 작동합니다.하지만 나는 그것을 어떻게 처리하는지 모릅니다.
다른 테이블이 아닌 한 테이블의 행을 건너뛰거나 행의 높이를 변경하려는 경우 이 코드를 조정해야 할 수도 있습니다.
<table class = "fixedColumns">
<tr><td> row 1 </td></tr>
<tr><td> row 2 </td></tr>
</table>
<table class = "scrollableTable">
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
</table>
<style type = "text/css" >
.fixedColumns
{
vertical-align:top;
display: inline-block;
}
.scrollableTable
{
display: inline-block;
width:50px;
white-space: nowrap;
overflow-x: scroll;
}
</style>
//If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute
table tbody {
position: relative;
}
table thead {
position: relative;
}
//Make both the first header and first data cells (First column) absolute so that it sticks to the left
table td:first-of-type {
position: absolute;
}
table th:first-of-type {
position: absolute;
}
//Move Second column according to the width of column 1
table td:nth-of-type(2) {
padding-left: <Width of column 1>;
}
table th:nth-of-type(2) {
padding-left: <Width of column 1>;
}
저는 방금 테이블의 가장 오른쪽에 있는 끈적끈적한 열을 끈적하게 만들었습니다.
th:last-of-type {
position: sticky;
right: 0;
width: 120px;
background: #f7f7f7;
}
td:last-of-type {
position: sticky;
right: 0;
background: #f7f7f7;
width: 120px;
}
당신이 한다면 나는 믿습니다.{position: sticky; left: 0;}원하는 결과를 얻을 수 있습니다.
<div style="max-width: 780px; overflow: scroll;">
<table style="">
<tr>
<th style="position: sticky;left:0;background-color:aquamarine;">aaaaaaa</th>
<th style="position: sticky;left:111px;background-color:aquamarine;">aaaaaaa</th>
<th>aaaaaaa</th>
<th>aaaaaaa</th>
<th>aaaaaaa</th>
<th>aaaaaaa</th>
<th>aaaaaaa</th>
</tr>
<tr>
<th style="position: sticky;left:0;background-color:aquamarine;">111111111111</th>
<th style="position: sticky;left:111px;background-color:aquamarine;">111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
</tr>
</table>
</div>또는 미리 결정된 크기로 t바디 스타일을 지정합니다.height:20em예) 및 사용overflow-y:scroll;
그런 다음 페이지의 나머지 부분과 독립적으로 스크롤되는 큰 본문을 가질 수 있습니다.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "400px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 3
}
} );
} );<head>
<title>table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<style>
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 900px;
margin: 0 auto;
}
</style>
</head><table id="example" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
<td>4804</td>
<td>b.williamson@datatables.net</td>
</tr>
<tr>
<td>Herrod</td>
<td>Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
<td>9608</td>
<td>h.chandler@datatables.net</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>r.davidson@datatables.net</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>c.hurst@datatables.net</td>
</tr>
<tr>
<td>Sonya</td>
<td>Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
<td>1667</td>
<td>s.frost@datatables.net</td>
</tr>
<tr>
<td>Jena</td>
<td>Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
<td>3814</td>
<td>j.gaines@datatables.net</td>
</tr>
<tr>
<td>Sakura</td>
<td>Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
<td>9383</td>
<td>s.yamamoto@datatables.net</td>
</tr>
<tr>
<td>Thor</td>
<td>Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
<td>8327</td>
<td>t.walton@datatables.net</td>
</tr>
<tr>
<td>Finn</td>
<td>Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
<td>2927</td>
<td>f.camacho@datatables.net</td>
</tr>
<tr>
<td>Serge</td>
<td>Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
<td>8352</td>
<td>s.baldwin@datatables.net</td>
</tr>
<tr>
<td>Zenaida</td>
<td>Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
<td>7439</td>
<td>z.frank@datatables.net</td>
</tr>
<tr>
<td>Zorita</td>
<td>Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
<td>4389</td>
<td>z.serrano@datatables.net</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
<td>3431</td>
<td>j.acosta@datatables.net</td>
</tr>
<tr>
<td>Cara</td>
<td>Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
<td>3990</td>
<td>c.stevens@datatables.net</td>
</tr>
<tr>
<td>Hermione</td>
<td>Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
<td>1016</td>
<td>h.butler@datatables.net</td>
</tr>
<tr>
<td>Lael</td>
<td>Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
<td>6733</td>
<td>l.greer@datatables.net</td>
</tr>
<tr>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
<td>8196</td>
<td>j.alexander@datatables.net</td>
</tr>
<tr>
<td>Shad</td>
<td>Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
<td>6373</td>
<td>s.decker@datatables.net</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<td>5384</td>
<td>m.bruce@datatables.net</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<td>4226</td>
<td>d.snider@datatables.net</td>
</tr>
</tbody>
</table>이 작업은 데이터 테이블을 사용하여 쉽게 수행할 수 있습니다.데이터 테이블을 처음 사용하는 사람들은 https://datatables.net/ 을 참조하십시오.플러그인이며 많은 기능을 제공합니다.주어진 코드에서 헤더는 고정되고, 처음 3개의 열은 고정되며, 여러 다른 기능도 있습니다.
이 질문에 대한 답변을 일일이 확인하지는 않았지만, 대부분을 분석한 결과 셀이나 헤드에 여러 줄 데이터가 있을 경우 설계에 실패하는 것으로 나타났습니다.저는 이것을 해결하기 위해 자바스크립트를 사용했습니다.누군가 이것이 도움이 되길 바랍니다.
https://codepen.io/kushagrarora/pen/zeYaoY
var freezeTables = document.getElementsByClassName("freeze-pane");
[].forEach.call(freezeTables, ftable => {
var wrapper = document.createElement("div");
wrapper.className = "freeze-pane-wrapper";
var scroll = document.createElement("div");
scroll.className = "freeze-pane-scroll";
wrapper.appendChild(scroll);
ftable.parentNode.replaceChild(wrapper, ftable);
scroll.appendChild(ftable);
var heads = ftable.querySelectorAll("th:first-child");
let maxWidth = 0;
[].forEach.call(heads, head => {
var w = window
.getComputedStyle(head)
.getPropertyValue("width")
.split("px")[0];
if (Number(w) > Number(maxWidth)) maxWidth = w;
});
ftable.parentElement.style.marginLeft = maxWidth + "px";
ftable.parentElement.style.width = "calc(100% - " + maxWidth + "px)";
[].forEach.call(heads, head => {
head.style.width = maxWidth + "px";
var restRowHeight = window
.getComputedStyle(head.nextElementSibling)
.getPropertyValue("height");
var headHeight = window.getComputedStyle(head).getPropertyValue("height");
if (headHeight > restRowHeight)
head.nextElementSibling.style.height = headHeight;
else head.style.height = restRowHeight;
});
});@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
font-family: "Open Sans", sans-serif;
}
.container {
width: 400px;
height: 90vh;
border: 1px solid black;
overflow: hidden;
}
table,
th,
td {
border: 1px solid #eee;
}
.table {
width: 100%;
margin-bottom: 1rem;
table-layout: fixed;
border-collapse: collapse;
}
.freeze-pane-wrapper {
position: relative;
}
.freeze-pane-scroll {
overflow-x: scroll;
overflow-y: visible;
}
.freeze-pane th:first-child {
position: absolute;
background-color: pink;
left: 0;
top: auto;
max-width: 40%;
}<div class="container">
<table class="freeze-pane">
<tbody>
<tr>
<th>
<p>Model</p>
</th>
<th>
<p>Mercedes Benz AMG C43 4dr</p>
</th>
<th>
<p>Audi S4 Premium 4dr</p>
</th>
<th>
<p>BMW 440i 4dr sedan</p>
</th>
</tr>
<tr>
<th>
<p>Passenger capacity</p>
</th>
<td>
<p>5</p>
</td>
<td>
<p>5</p>
</td>
<td>
<p>5</p>
</td>
</tr>
<tr>
<th>
<p>Front (Head/Shoulder/Leg) (In.)</p>
</th>
<td>
<p>37.1/55.3/41.7</p>
</td>
<td>
<p>38.9/55.9/41.3</p>
</td>
<td>
<p>39.9/54.8/42.2</p>
</td>
</tr>
<tr>
<th>
<p>Second (Head/Shoulder/Leg) (In.)</p>
</th>
<td>
<p>37.1/55.5/35.2</p>
</td>
<td>
<p>37.4/54.5/35.7</p>
</td>
<td>
<p>36.9/54.3/33.7</p>
</td>
</tr>
</tbody>
</table>
</div>참고: "컨테이너" 디비는 코드가 모바일 뷰와 호환된다는 것을 증명하기 위한 것입니다.
서킷 브레이커의 예제를 개선했습니다. 테이블에 패딩이 있기 때문에 원래 예제 코드가 고정 열을 흔들 것입니다.border-collapse: collapse그것을 무효로 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.view {
margin: auto;
width: 600px;
}
.wrapper {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}
.sticky-col {
position: -webkit-sticky;
position: sticky;
background-color: white;
}
.first-col {
padding: 0;
margin: 0;
left: 0;
}
.second-col {
left: 200px;
}
.col {
width: 200px;
min-width: 200px;
max-width: 200px;
}
</style>
</head>
<body>
<div class="view">
<div class="wrapper">
<table class="table" style="border-collapse: collapse;">
<colgroup>
<col class="col"/>
<col class="col"/>
<col class="col"/>
<col class="col"/>
</colgroup>
<thead>
<tr>
<th class="sticky-col first-col">Number</th>
<th class="sticky-col second-col">First Name</th>
<th>Last Name</th>
<th>Employer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">1</td>
<td class="sticky-col second-col">Mark</td>
<td>Ham</td>
<td>Micro</td>
</tr>
<tr>
<td class="sticky-col first-col">2</td>
<td class="sticky-col second-col">Jacob</td>
<td>Smith</td>
<td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
</tr>
<tr>
<td class="sticky-col first-col">3</td>
<td class="sticky-col second-col">Larry</td>
<td>Wen</td>
<td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
.container {
width: 500px;
height: 300px;
background-color: #ddd;
overflow: auto;
border: 1px solid #ccc;
}
table {
table-layout: fixed;
width: 100%;
overflow-x: scroll;
border-collapse: collapse;
}
td,th {
border: 1px solid #ccc;
}
th {
font-weight: 600;
text-align: left;
background-color: #f1f4f7;
}
.fixed-td {
position: sticky;
width: 100px;
z-index: 2;
left: 0;
background-color: #fff;
}
.fixed-hd {
position: sticky;
top: 0;
z-index: 1;
}
.left-top-td {
z-index: 3;
}
.scrollable-td {
width: 200px;
}<div class="container">
<table>
<tr>
<th class="fixed-td fixed-hd left-top-td">Fixed</td>
<th class="scrollable-td fixed-hd">Scrollable 1</td>
<th class="scrollable-td fixed-hd">Scrollable 2</td>
<th class="scrollable-td fixed-hd">Scrollable 3</td>
<th class="scrollable-td fixed-hd">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable 4</td>
</tr>
<tr>
<td class="fixed-td">Fixed last</td>
<td class="scrollable-td">Scrollable 1</td>
<td class="scrollable-td">Scrollable 2</td>
<td class="scrollable-td">Scrollable 3</td>
<td class="scrollable-td">Scrollable last</td>
</tr>
</table>
</div>HTML5에서는 CSS를 사용할 수 있습니다.style.transform.
그러나 Mac에서 구현하는 경우 "페이지 간 스와이프"를 해제하는 것이 좋습니다.
let l = 0;
let t = 0;
const MouseWheelHandler = (e) => {
// vertical scroll
if (e.deltaX == -0) {
// t = t - e.deltaY
// horizonal scroll
} else if (e.deltaY == -0) {
l = l - e.deltaX
if (l >= 0) {
l = 0;
document.getElementById("gantt_task").style.transform = "translateX(1px)"
document.getElementById("gantt_task_header").style.transform = "translateX(1px)"
return false
}
document.getElementById("gantt_task").style.transform = "translateX(" + l.toString() + "px)"
document.getElementById("gantt_task_header").style.transform = "translateX(" + l.toString() + "px)"
}
return false;
}
window.addEventListener("wheel", MouseWheelHandler, false);.row {
border-bottom: 1px solid #979A9A
}
#gantt_grid_header {
height: 30px;
width: 100px;
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
border: 1px solid #cecece;
background-color: #F08080;
}
#gantt_task_header {
height: 30px;
width: 400px;
position: fixed;
z-index: 2;
top: 0px;
left: 100px;
border: 1px solid #cecece;
background-color: #FFC300;
}
#gantt_grid {
width: 100px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border: 1px solid #cecece;
background-color: #DAF7A6;
}
#gantt_task {
width: 400px;
height: 400px;
position: absolute;
left: 100px;
top: 0px;
border: 1px solid #cecece;
background-color: #FF5733;
}<html>
<div id="gantt_grid_header">
HEADER
</div>
<div id="gantt_grid">
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
<div class="row">V Scroll OK</div>
</div>
<div id="gantt_task_header">
DATA HEADER
</div>
<div id="gantt_task">
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
<div class="row">Vertical,Horizenal Scroll OK</div>
</div>
</html>현재 테이블을 너무 많이 만지지 않으려면 테이블 앞에 고정된 가짜 열을 만들 수 있습니다.
이 예제에서는 JS를 사용하지 않는 한 가지 방법을 보여 줍니다.
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
min-width: 600px;
}
.labels {
display:flex;
flex-direction: column
}
.overflow {
overflow-x: scroll;
min width: 400px;
flex: 1;
}
.label {
display: flex;
align-items: center;
white-space:nowrap;
padding: 10px;
flex: 1;
border-bottom: 1px solid #ddd;
border-right: 2px solid #ddd;
}
.label:last-of-type {
overflow-x: scroll;
border-bottom: 0;
}
td {
border: 1px solid #ddd;
padding: 10px;
}
.flex {
display:flex;
max-width: 600px;
padding: 0;
border: 5px solid #ddd;
}<div class="flex">
<div class="labels">
<span class="label">Label 1</span>
<span class="label">Lorem ipsum dolor sit amet.</span>
<span class="label">Lorem ipsum dolor.</span>
</div>
<div class="overflow">
<table>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
<tr>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
<td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td>
</tr>
</table>
</div>
</div>언급URL : https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b
반응형
'programing' 카테고리의 다른 글
| j헤드 404인 경우 이미지를 숨기기 위해 이미지가 존재하는지 확인하는 쿼리 (0) | 2023.08.16 |
|---|---|
| webpack angular2 app의 node_modules에서 CSS를 가져오는 방법 (0) | 2023.08.16 |
| 핵심 데이터 기본 키 (0) | 2023.08.16 |
| 오픈에서 오픈_s로 전환하는 방법 (0) | 2023.08.16 |
| Spring Data JPA - 여러 EnableJpa 저장소 (0) | 2023.08.16 |