Menu
Here is some kinda complicated html table formatting I have: http://jsfiddle.net/nyCKE/8517/
The problem is that the "Subject Areas" table does not work when I try to do overflow scroll. It has a height set to 200px, but when I add many rows to the table, it doesn't stay at 200, it just keeps extending the table. As you can see on the jsfiddle, I have tbody set to overflow-y scroll (I want the thead to be fixed). But, it refuses to scroll. The "Classes" table has no data so it stays at 200px. That is what I want the height of the subject areas table to be, but clearly it is bigger. Here is some of the relevant css:
tbody {
overflow-y scroll;
}
.subjects{
width:100%;
height: 200px;
}
.classes {
width:100%;
height: 200px;
margin-top: 5px;
}
Another thing I forgot to mention is I have 2 div's, one for left and one for right. The left div contains the subjects and classes tables. The right div contains the overview. This is for when the window is bigger and by extending the window in the fiddle, you can see that the overview table goes to the right, which is what I want. I am not sure if these div's mess up the tbody scrolling.
Does anyone know how to solve my problem?
832
Bug in your css:
tbody {
overflow-y scroll;
}
should be:
tbody {
overflow-y: scroll;
}
child and use display: block
tbody {
overflow-y: scroll;
display: block;
height: 200px;
}
body {
background: #6CD3F8;
/*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}
h3 {
color: white;
text-align: left;
margin-top: 20px;
}
.scan {
padding: 0% 10%;
}
table {
background: #E0F7FE;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
table td,
table td * {
vertical-align: top;
}
tbody {
overflow-y: scroll;
display: block;
height: 200px;
}
th {
color: #265C82;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
padding-left: 5px;
padding-top: 5px;
}
td {
padding-left: 10px;
}
::-webkit-input-placeholder {
color: #00B2F3;
}
.search {
color: #00B2F3;
border: 0px solid red;
border-radius: 10px;
width: calc(100% - 10px);
height: 35px;
margin-top: 5px
}
.select {
width: calc(100% - 10px);
}
.icon {
width: 20px;
height: 20px;
margin: 2px 8px 0px 5px;
float: left;
}
hr {
border-color: #00B2F3;
margin: 3px 0;
width: calc(100% - 5px);
}
.subjects {
width: 100%;
height: 200px;
}
.classes {
width: 100%;
height: 200px;
margin-top: 5px;
}
.sections {
width: 100%;
height: 405px;
}
.left {
width: 50%;
float: left;
margin-right: 5px;
margin-bottom: 3%;
min-width: 300px;
}
.right {
width: calc(50% - 10px);
float: left;
min-width: 300px;
margin-bottom: 3%;
}
.mid {
width: 100%;
text-align: center;
float: left;
position: relative;
}
.wrapper {
width: 100%;
text-align: right;
float: left;
position: relative;
}
.logo {
max-width: 30%;
margin: 10px 0px;
}
.links > a {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding: 0px 10px;
}
.links {
/*padding-left: 100px;*/
padding-bottom: 10px;
}<body>
<div class="scan">
<h3>Summer Session A</h3>
<!-- <div class="left">
left
</div> -->
<!-- <div class="right">
right
</div> -->
<div class="left">
<table class="subjects">
<thead>
<tr>
<th>
<div>Subject Areas</div>
<hr>
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<!-- <select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> -->
<!-- <tr>
<td>
<select class="form-control select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr> -->
</tbody>
</table>
<table class="classes">
<thead>
<tr>
<th>
Classes
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table class="sections">
<thead>
<tr>
<th>
Overview
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>You can wrap the table in a container and give the height and overflow to the container.
body {
background: #6CD3F8;
/*background: -webkit-linear-gradient(top left, #6CD3F8 0%, #E0F7FE 100%);
background: linear-gradient(to bottom right, #6CD3F8 0%, #E0F7FE 100%);*/
}
h3 {
color: white;
text-align: left;
margin-top: 20px;
}
.scan {
padding: 0% 10%;
}
table {
background: #E0F7FE;
}
table,
.tableContainer {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
table td,
table td * {
vertical-align: top;
}
tbody {
overflow-y scroll;
}
th {
color: #265C82;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 17px;
padding-left: 5px;
padding-top: 5px;
}
td {
padding-left: 10px;
}
::-webkit-input-placeholder {
color: #00B2F3;
}
.search {
color: #00B2F3;
border: 0px solid red;
border-radius: 10px;
width: calc(100% - 10px);
height: 35px;
margin-top: 5px
}
.select {
width: calc(100% - 10px);
}
.icon {
width: 20px;
height: 20px;
margin: 2px 8px 0px 5px;
float: left;
}
hr {
border-color: #00B2F3;
margin: 3px 0;
width: calc(100% - 5px);
}
.subjectsContainer {
height: 200px;
overflow: scroll;
}
.subjects {
width: 100%;
}
.classes {
width: 100%;
height: 200px;
margin-top: 5px;
}
.sections {
width: 100%;
height: 405px;
}
.left {
width: 50%;
float: left;
margin-right: 5px;
margin-bottom: 3%;
min-width: 300px;
}
.right {
width: calc(50% - 10px);
float: left;
min-width: 300px;
margin-bottom: 3%;
}
.mid {
width: 100%;
text-align: center;
float: left;
position: relative;
}
.wrapper {
width: 100%;
text-align: right;
float: left;
position: relative;
}
.logo {
max-width: 30%;
margin: 10px 0px;
}
.links > a {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding: 0px 10px;
}
.links {
/*padding-left: 100px;*/
padding-bottom: 10px;
}<body>
<div class="scan">
<h3>Summer Session A</h3>
<!-- <div class="left">
left
</div> -->
<!-- <div class="right">
right
</div> -->
<div class="left">
<div class="subjectsContainer tableContainer">
<table class="subjects">
<thead>
<tr>
<th>
<div>Subject Areas</div>
<hr>
</th>
</tr>
<tr>
<th>
<input type="text" class="form-control search" onkeyup="searchFunction('subjects')" placeholder="Search...">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Mathematics</td>
</tr>
<tr>
<td>Engineering</td>
</tr>
<!-- <select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> -->
<!-- <tr>
<td>
<select class="form-control select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr> -->
</tbody>
</table>
</div>
<table class="classes">
<thead>
<tr>
<th>
Classes
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table class="sections">
<thead>
<tr>
<th>
Overview
<hr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
