Cubetastic Cubetastic - 27 days ago 5
CSS Question

css - How to style a div so that the table inside gets partially hidden and can be scrolled

I have a table, and I want to put it inside a div so that the table is only shown until the div's height, and can be scrolled to view the rest of the table. Here is my code:



#listTimes {
margin-right: 0;
height: 100px;
}

#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}

#timesList table, td, th {
border: 1px solid black;
padding: 5px;
}

#timesList th {
text-align: left;
}

#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}

<html>
<body>
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>





Right now, the table just appears the way it is. I want to set a height for both the form and the table together, and when I scroll to see the table, the form should follow me. I tried this using height attributes, overflow attributes, but none of them work.

Answer Source

Add the overflow-y property set height on #timesList

 #timesList {
      margin-right: 0;
      height: 100px;
      overflow-y: scroll;
    }

.listTimes {
  height: 100px;
  overflow: hidden;
}

#timesList {
  height: 100%;
  overflow-y: scroll;
  /* rough width of scrollbar */
  padding-right: 20px;
  margin-right: -20px;
}

#timesList table {
  border-collapse: collapse;
  margin: 0 auto;
  right: 0;
  left: 0;
}

#timesList table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}

#timesList th {
  text-align: left;
}

#session {
  border-radius: 5px 5px 0 0;
  height: 10px;
  width: 20%;
  margin: 0 auto;
}
<div class="listTimes">
  <form id="session">
    <select name="sessions" onchange="showUser(this.value)">
	            <option value="1">Session 1</option>
	            <option value="2">Session 2</option>
	            <option value="3">Session 3</option>
	            <option value="4">Session 4</option>
	            <option value="5">Session 5</option>
	          </select>
  </form>
  <br>
  <div id="timesList">
    <!-- This is where the table is -->
    <table>
      <tr>
        <th>No.</th>
        <th>foo</th>
        <th>bar</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
      <tr>
        <th>1</th>
        <th>fubar</th>
        <th>lnrbaaet</th>
      </tr>
    </table>
  </div>
</div>