오버플로 : HTML 표에서 스크롤이 제대로 작동하지 않습니다.

여러 행이 포함 된 html 표가 있지만 사용자가 가운데 행을 스크롤 할 수 있지만 상단 및 하단 행을 계속 표시 할 수있게하려고합니다. 오버플로 : 자동을 사용하려고하는데 제대로 작동하지 않습니다.오버플로 : HTML 표에서 스크롤이 제대로 작동하지 않습니다.

.emailtablecontainer table tr td p { 
    font-size: 14px; 
    font-family: "Arial Black", Gadget, sans-serif; 
    text-align: center; 
} 
.supporttext1 { 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 16px; 
    color: #777; 
} 
.bg_blue{ background:url("../Images/bg_blue.png") top left no-repeat; } 
.big_bg_blue{ 
    width: 788px; 
    height: 330px; 
    background-position: -5px -5px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 26px; 
} 
.inner_bg_blue{ 
    width: 719px; 
    height: 272px; 
    background-position: -5px -340px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 30px; 
} 
.midrowappttbl { 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-bottom-style: solid; 
    border-top-color: #000; 
    border-right-color: #000; 
    border-bottom-color: #000; 
    border-left-color: #000; 
    border-right-style: none; 
    border-left-style: none; 
} 
.toprowappttbl { 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: solid; 
    border-left-style: none; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-color: #000; 
    border-right-color: #000; 
    border-bottom-color: #000; 
    border-left-color: #000; 
} 
.btmrowappttbl { 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    border-top-color: #000; 
    border-right-color: #000; 
    border-bottom-color: #000; 
    border-left-color: #000; 
} 
.midwholeappttbl { 
    color: #000; 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 12px; 
    text-align: center; 
    cursor: pointer; 
} 
.appttblcontainer { 
    overflow: auto; 
} 
.midwholeappttbl:hover { 
    background-color: #FFF; 
    color: #8DACC7; 
}

누구나 내가 뭘 잘못 알고 여기

<div class="box_container"> 
      <div class="big_bg_blue bg_blue"> 
      <div class="inner_bg_blue bg_blue"> 
      <table width="100%" border="0" cellspacing="0"> 
    <tr class="topwholeappttbl"> 
    <td width="32%" height="35" class="toprowappttbl">&nbsp;</td> 
    <td width="32%" class="toprowappttbl">&nbsp;</td> 
    <td width="25%" class="toprowappttbl">&nbsp;</td> 
    <td width="11%" class="toprowappttbl">&nbsp;</td> 
    </tr> 
    <div class="apptblcontainer"> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Connor Kraft</p></td> 
    <td class="midrowappttbl"><p>First Appt</p></td> 
    <td class="midrowappttbl"><p>12/12/12 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Alex Cross</p></td> 
    <td class="midrowappttbl"><p>Second Appt</p></td> 
    <td class="midrowappttbl"><p>12/31/15 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>George Hoffman</p></td> 
    <td class="midrowappttbl"><p>Signup Status</p></td> 
    <td class="midrowappttbl"><p>11/15/12 @ 4:30 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Ricky Forman</p></td> 
    <td class="midrowappttbl"><p>Follow Up</p></td> 
    <td class="midrowappttbl"><p>11/06/12 @ 6:45 AM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Connor Kraft</p></td> 
    <td class="midrowappttbl"><p>First Appt</p></td> 
    <td class="midrowappttbl"><p>12/12/12 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Alex Cross</p></td> 
    <td class="midrowappttbl"><p>Second Appt</p></td> 
    <td class="midrowappttbl"><p>12/31/15 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>George Hoffman</p></td> 
    <td class="midrowappttbl"><p>Signup Status</p></td> 
    <td class="midrowappttbl"><p>11/15/12 @ 4:30 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Ricky Forman</p></td> 
    <td class="midrowappttbl"><p>Follow Up</p></td> 
    <td class="midrowappttbl"><p>11/06/12 @ 6:45 AM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Connor Kraft</p></td> 
    <td class="midrowappttbl"><p>First Appt</p></td> 
    <td class="midrowappttbl"><p>12/12/12 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Alex Cross</p></td> 
    <td class="midrowappttbl"><p>Second Appt</p></td> 
    <td class="midrowappttbl"><p>12/31/15 @ 12:00 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>George Hoffman</p></td> 
    <td class="midrowappttbl"><p>Signup Status</p></td> 
    <td class="midrowappttbl"><p>11/15/12 @ 4:30 PM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    <tr class="midwholeappttbl"> 
    <td class="midrowappttbl" height="45"><p>Ricky Forman</p></td> 
    <td class="midrowappttbl"><p>Follow Up</p></td> 
    <td class="midrowappttbl"><p>11/06/12 @ 6:45 AM</p></td> 
    <td class="midrowappttbl"><div class="View_Button SpritesPage1"></div></td> 
    </tr> 
    </div> 
    <tr class="btmwholeappttbl"> 
    <td class="btmrowappttbl" height="20">&nbsp;</td> 
    <td class="btmrowappttbl">&nbsp;</td> 
    <td class="btmrowappttbl">&nbsp;</td> 
    <td class="btmrowappttbl">&nbsp;</td> 
    </tr> 
</table> 
      </div> 
      </div> 
      </div>

는 CSS가 : 여기 내 코드입니다 : html로

여기인가?

출처

2012-11-06 user1751581

확인 페이지 : 예를 들어 http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619 – Wlada

overdlow-y : scroll이 필요합니다.

.box_container { 
    height: 200px; 
    overflow-y: scroll; 
}

http://jsfiddle.net/HVqJx/2/

출처

2012-11-06 02:44:44 Wlada

나는 시도하고 있지 않다 box_container에서 사용하려면 appttblcontainer에서 사용하려고합니다. – user1751581

overflow-y : scroll을 추가 할 수 있습니다. 각 요소에 – Wlada

또한 여기 테이블의 내부 div 속성이 중첩됩니다. – Wlada

오버플로 : HTML 표에서 스크롤이 제대로 작동하지 않습니다.

답변

관련 문제