Question

我有一个包含多行的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">&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

你需要溢出y：滚动;例如：

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

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

溢出：Scroll在HTML表格中无法正常工作

1 个答案: