0
테이블 헤더를 수정하고 싶습니다. StackOverflow's Answer 중 하나에서 대답을 발견했지만, 그 코드를 사용하는 데 문제가 있습니다. 헤더 크기를 백분율로 지정하여 사용자가 페이지를 확대/축소/축소 할 때 표가 자체 조정하도록합니다.고정 헤더 테이블이 전체 화면을 차지하지 않음
이 코드에서 헤더 크기가 테이블 데이터 행의 크기와 일치하지 않을 때. 내가 CSS에 position 태그를 주석 처리하면, 헤더는 테이블 데이터 행과 정렬되지만 고정되지 않은 헤더가됩니다. 헤더를 테이블 데이터 행에 맞추고 전체 화면을 차지하도록 도와주십시오 (다양한 헤더 및 해당 데이터 행의 너비가 다를 수 있으므로 %로 지정된 크기). 다음은
<style type="text/css">
table
{
width:100%;
border:1px solid #000000;
}
thead
{
background-color:#000268;
color:#FFFFFF;
text-align:center;
position:fixed;
top:0px;
width:100%;
}
thead th
{
text-align:center;
border-width: 1px;
border-style: outset;
}
thead.th.hd1
{
width:20%
text-align:center;
border-width: 1px;
border-style: outset;
}
tbody {
color:#000000;
text-align:center;
height:150px;
overflow: scroll;
margin:0px;
width:100%;
}
tbody td
{
height:60px;
width:100px;
border-width: 1px;
border-style: outset;
}
</style>
<table>
<thead>
<tr><th class = "hd1">Head1</th><th class = "hd1">Head2</th><th class = "hd1">Head3</th><th class = "hd1">Head4</th><th class = "hd1">Head5</th><th class = "hd1">Head6</th></tr>
</thead>
<tbody>
<tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr>
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr>
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr>
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr>
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr>
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr>
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr>
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr>
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr>
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr>
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr>
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr>
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr>
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr>
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr>
</tbody>
</table>
시도는 내 눈 .. JSfiddle – Abhimanyu
이렇게 많은 세포에서 – George