Dean Marsden
Reputation: 192
Table within Div within Div
I have a slight issue that I have not been able to solve. I require to have a web page that comprises of a header(OuterHeader), a footer(OuterFooter) and a content. Within the Content I require another header(InnerHeader) and footer(InnerFooter) as well as a table that is scroll-able when covered by the innerFooter.
The outerHeader and outerFooter will be a constant size along with the innerHeader and InnerFooter. This all needs to work with a page that can be size adjustable.
So far this is what I have on JSFiddle: http://jsfiddle.net/hvLLbs32/
HTML:
<body>
<div name="OuterHeader" id="OuterHeader">
<p>This is the OuterHeader.</p>
</div>
<div name="Content" id="Content">
<div name="InnerHeader" id="InnerHeader">
<p>This is the InnerHeader.</p>
</div>
<div name="Wrapper" id="Wrapper">
<div name="TableDiv" id="TableDiv">
<table name="Table" id="Table">
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
</table>
</div>
</div>
<div name="InnerFooter" id="InnerFooter">
<p>This is the InnerFooter.</p>
</div>
</div>
<div name="OuterFooter" id="OuterFooter">
<p>This is the OuterFooter.</p>
</div>
</body>
CSS
#OuterHeader {
position: fixed;
background-color: red;
top: 0px;
height : 100px;
width : 100%;
overflow: hidden;
z-index : 1;
}
#InnerHeader {
position: fixed;
background-color: yellow;
height : 100px;
width : 100%;
overflow: hidden;
}
#Content {
position: fixed;
background-color: orange;
width : 100%;
bottom:200px;
top: 100px;
bottom: 100px;
overflow: hidden;
}
#InnerFooter {
position: absolute;
background-color: green;
bottom: 0px;
height : 100px;
width : 100%;
overflow: hidden;
}
#OuterFooter {
position: fixed;
background-color: blue;
bottom : 0px;
height : 100px;
width : 100%;
}
#Wrapper{
position: absolute; /* absolute*/
top: 100px;
width: 100%;
height: 100%;
overflow-y: auto;
}
#TableDiv{
position: relative;
width: 100%;
}
#Table{
width:100%;
border-collapse:collapse;
}
#Table td{
padding:7px; border:#4e95f4 1px solid;
}
#Table tr{
background: #b8d1f3;
}
#Table tr td:nth-child(odd){
background: #b8d1f3;
}
#Table tr td:nth-child(even){
background: #dae5f4;
}
The colours might be bad, but it helps to differentiate the different Divs.
If anyone has any suggestions, it would be much appreciated. :)
Upvotes: 1
Views: 98
Answers (1)
Pete
Reputation: 58422
You can achieve what you want with the following html and styles:
body, html {
padding:0;
margin:0;
height:100%;
position:relative;
}
#wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#table {
display:table;
width:100%;
height:100%;
}
#table .row {
display:table-row;
width:100%;
height:100px;
}
#table #content {
height:100%;
}
#outer-header {
background:red
}
#inner-header {
background:yellow
}
#inner-footer {
background:green
}
#outer-footer {
background:blue
}
#TableDiv {
height:100%;
overflow-y:scroll;
}
#Table {
width:100%;
border-collapse:collapse;
}
#Table td {
padding:7px;
border:#4e95f4 1px solid;
}
#Table tr {
background: #b8d1f3;
}
#Table tr td:nth-child(odd) {
background: #b8d1f3;
}
#Table tr td:nth-child(even) {
background: #dae5f4;
}<div id="wrapper">
<div id="table">
<div id="outer-header" class="row">outer-header</div>
<div id="inner-header" class="row">inner-header</div>
<div id="content" class="row">
<div name="TableDiv" id="TableDiv">
<table name="Table" id="Table">
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
</table>
</div>
</div>
<div id="inner-footer" class="row">inner-footer</div>
<div id="outer-footer" class="row">outer-footer</div>
</div>
</div>Fiddle so you can see it in a high window
If you want the footer to be pushed off the bottom if the content is too long, rather than have the content section scroll, then just remove the #TableDiv styles
Upvotes: 2
Related Questions
- How to make scrollable div inside a <td>?
- Putting a scrollable div into table
- Scroll inside the table
- Table in div with scrollbar
- HTML Inner Table With Horizontal Scroll
- Horizontal scroll div inside a div displayed as a table
- Horizontal scrolling Inside a DIV with Tables
- Scrollable table inside another table
- Scrollable div with html table
- css horizontal scroll within a table