Menu
Look at the table. It has 3 sections:
I am trying to stick the footer at bottom of the page. Table height needs to be resizable, and I need to place a vertical scroll bar if the rows with values exceed the table height limits. I don’t want to expand the row height of the value. Is there a way to do that? (only html/css).
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="table">
<div class="row headers">
<div class="cell col1">Col1</div>
<div class="cell col2">Col2</div>
<div class="cell col3">Col3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row footers">
<div class="cell col1">Footer</div>
<div class="cell col2"></div>
<div class="cell col3"></div>
</div>
</div>
</body>
</html>
Styles:
.table{
display:table;
width: 100%;
border: 1px solid #000;
background: #eee;
}
.row{
display:table-row;
}
.headers { color: #505; font-weight: bold;}
.footers { color: #055;}
.cell{
background: #eee;
display:table-cell;
border: 1px solid #fff;
}
.col1 { width:50%;}
.col2 { width:25%;}
.col3 { width:25%;}
Edit: My table needs to be vertically expandable, and it needs to show a scroll bar when the rows inside header/footer overflows the table height.
791
< div id = "footer" >This is a footer. This stays at the bottom of the page.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
Well first of all i don't think what you want to do is possible the way you do it. Why do you want to have the footer inside the table?
You have to use positioning to get the footer to the bottom of the page, however:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position
The only solution i could think of is creating a second table for the footer. To make it less complicaded for yourself u suggest to just use the <table> elements.
<table>
<theader>
<tr>
<th class="col1">Col1</th>
<th class="col2">Col2</th>
<th class="col3">Col3</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<table id="footer">
<tr>
<td class="col1">
Footer
</td>
<td class="col2">
</td>
<td class="col3">
</td>
</tr>
</table>
now you can just position absolute your footer table:
#footer
{
width: 100%;
position: absolute;
bottom: 0;
}
So next problem we're facing is a <td> element doesn't react to any overflow. To bypass this you can wrap every content of a <td> into a div and set a overflow-y:
<td>
<div>
12312321312312312312312313123123123123345 long content as example
</div>
</td>
Now we should also set a static height to the div:
td > div, th > div
{
height: 22px;
overflow-y: scroll;
}
Also make sure the td content breaks to the y axis:
td, th
{
border: 1px solid #fff;
background: #eee;
word-break: break-all;
}
Now when you wrap every content into a <div> it should work, same with the footer table.
jsFiddle
Hope this was helpfull
151
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
