我有一个包含多行的 html 表,但我希望用户能够滚动中间的行,但保持顶部和底部行可见。我正在尝试为此使用溢出:自动,但它无法正常工作。这是我的代码:
这是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"> </td>
<td width="32%" class="toprowappttbl"> </td>
<td width="25%" class="toprowappttbl"> </td>
<td width="11%" class="toprowappttbl"> </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"> </td>
<td class="btmrowappttbl"> </td>
<td class="btmrowappttbl"> </td>
<td class="btmrowappttbl"> </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;
}
有人知道我在做什么错吗?