1

I have an html table with multiple rows, but I want the user to be able to scroll through the rows in the middle, but keep the top and bottom rows visible. I am trying to use Overflow: Auto for this, but it isn't working properly. Here is my code:

Here Is The 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>

Here Is The 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;
}

Anyone know what I am doing wrong?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1751581
  • 87
  • 1
  • 11
  • Check this page: http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619 – Wlada Oct 15 '15 at 05:57

1 Answers1

0

You need overdlow-y: scroll; For example: 

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

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

Wlada
  • 1,052
  • 14
  • 25