溢出：滚动在HTML中无法正常工作表

Question

我有一个包含多行的html表，但我希望用户能够滚动浏览中间的行，但保持顶部和底部行可见。我正在尝试使用Overflow：Auto，但它不能正常工作。这里是我的代码：

下面是HTML：

<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：

.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; 
} 

任何人都知道我做错了吗？

Answer 1

您需要overdlow-y：scroll;例如：

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

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