I wish to keep the height of the two children div's, abc and def constant, and each with height half that of their parent, xyz. I was able to do this using flex in CSS, but in each of the child div abc and def, I have tables in which rows are added dynamically. This causes the divs abc and def to expand to accommodate the rows.
I would like each of these to become scrollable when too many rows are added.
I have tried many solutions, but none of them seem to work.
Here is my code:
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
#abc {
width: 100%;
flex: 1;
}
#def {
width: 100%;
flex: 1;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<h2>ABC details</h2>
<table id="abc-table"></table>
</div>
<div id="def" class="container-fluid">
<h2>DEF details</h2>
<table id="def-table"></table>
</div>
</div>
Thanks in advance.
If you are using a flexbox to get the overflow, you should wrap the flexbox child's contents into an absolutely positioned contanier so that it can scroll on overflow.
So here is the summary of what I've changed in your code:
To demonstrate the overflow, set a specific height for xyz container. You can change this height as per your requirement.
Added position: relative and overflow-y: auto to the flexbox children- abc and def.
Wrapped the contents of abc and def into an absolutely positioned box:
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Added some borders and the tables in the boxes for illustration.
* {
box-sizing: border-box;
}
#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
height: 250px;
border: 1px solid;
}
#abc {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
#def {
width: 100%;
flex: 1;
border: 1px solid;
position: relative;
overflow-y: auto;
}
.flex-inner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid red;
}
<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<div class="flex-inner">
<h2>ABC details</h2>
<table id="abc-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
<div id="def" class="container-fluid">
<div class="flex-inner">
<h2>DEF details</h2>
<table id="def-table">
<tr>
<td colspan="2">Title</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
<tr>
<td>row</td>
<td>row</td>
</tr>
</table>
</div>
</div>
</div>
Give the child divs 'overflow:scroll', and 'height:[something]'.
Related
Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).
Difference between fiddle link and my expected output
1. the text 'co1' and 'co2' is vertically aligned
2. the vertical text should be fixed like the first column is.
fiddle code
1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
2.CSS
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Here's the expected output
Something like this?
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
.text-container {
display: inline;
float: left;
width: 1rem;
}
.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}
<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
I am attempting to control the height of a table body so that a scrollbar appears when more data than fits in a view is displayed, thead must stay visible. At the same time I'm trying to control the width of the table columns.
The table height can be controlled by setting 'display: block' in the table body css. The table body will now be limited by the container height or any height the table body is set to. This messes up the column widths though.
The column widths can be assured by setting as desired. As long as the tbody isn't set to 'display: block' the columns display properly but the tbody is out of control and ignores any height you may have set.
I'm trying to do this to make it possible for the result to be easily chapter 508 compliant for screen reader technology for those with disabilities. AT this point, I'm planning to convert to jquery.dataTables which puts a view port over top of a table so I can keep the 508 compliance and get the functionality I need. This seems way over the top for what I'm wanting to accomplish but I can't find a simple way to do it with a native table and basic css.
Test code is as follows:
<div id="div1">
<table>
<colgroup>
<col id='col-1'>
<col id='col-2'>
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February is a long month that seems like it could go on forever!</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$180</td>
</tr>
<tr>
<td>April</td>
<td>$86</td>
</tr>
<tr>
<td>May</td>
<td>$98</td>
</tr>
<tr>
<td>June</td>
<td>$29</td>
</tr>
<tr>
<td>July</td>
<td>$44</td>
</tr>
<tr>
<td>August</td>
<td>$244</td>
</tr>
</tbody>
</table>
#div1 {
height: 100px;
width: 400px;
padding: .5px;
border: 1px solid red;
}
colgroup {
width: 100%;
}
#col-1 {
width:70%;
}
#col-2 {
width:30%;
}
table {
width: 100%;
table-layout: auto;
}
thead {
background-color: #B2DFFF;
}
tbody {
height: 72px;
overflow-y: scroll;
background-color: #F0F0F0;
/* display:block; This will set column width correctly but it messes up tbody height */
display:block; /* This will allow height to be set but it messes up columns width */
}
Does anyone have any ideas?
Add overflow: auto to your container div's css.
Link to JSFiddle: http://jsfiddle.net/bmarple/NK378/10/
It is possible, just have some considerations:
thead {display: table; width: 100%;}
tbody {display: block; overflow: auto;}
tbody tr {display: table; width: 100%;}
td, th {/* should set a width for each td, th*/}
This is the example: http://jsfiddle.net/NK378/14/
Add overflow:scroll; to #div1 to add scroll beyond a height of 100px.
http://jsfiddle.net/NK378/13/
EDIT:
I could not see from your question that you wanted the header in view at all times. To do this, aply the style to the tbody so it doesn't apply to the header.. So the tbody tag has an id of "scroll", and the css for #scroll is:
#scroll {
display:block;
overflow-y: scroll;
display: block;
height: 20px;
width:400px;
}
http://jsfiddle.net/NK378/17/
Try to change the "display" property to "inline-block" and "max-width", "min-width", "overflow-x", "white-space" like that:
CSS
tbody td {
display: inline-block;
max-width: 100px;
min-width: 100px;
overflow-x: scroll;
white-space: nowrap;
}
JSFIDDLE
Watch the second line in the table.
In the case you want to limit the height of your td:
CSS
tbody td {
display: inline-block;
max-width: 100px;
min-width: 100px;
overflow-y: scroll;
max-height: 30px;
min-height: 30px;
overflow-x: hidden;
}
JSFIDDLE
You shouldn't use display: block on tables. They need their default display: table in order to function correctly.
You can just set the containing div to scroll when it overflows:
#div1 {
height: 100px;
width: 400px;
padding: .5px;
border: 1px solid red;
overflow-y: scroll; /* Added */
}
Demo
UPDATE
I completely missed the requirement for the thead to not scroll. One way to achieve this is to nest another table inside the first to separate it from the thead. You are allowed to place a <div> inside a <td> so that's how you create the scroll.
<div id="div1">
<table>
<thead>
<tr>
<th>Month</th>
<th class="savings">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div class="table-body">
<table>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February is a long month that seems like it could go on forever!</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$180</td>
</tr>
<tr>
<td>April</td>
<td>$86</td>
</tr>
<tr>
<td>May</td>
<td>$98</td>
</tr>
<tr>
<td>June</td>
<td>$29</td>
</tr>
<tr>
<td>July</td>
<td>$44</td>
</tr>
<tr>
<td>August</td>
<td>$244</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Some additional styles
th:first-child, td:first-child {
width: 80%;
}
table table td {
padding: 4px 5px;
}
.table-body {
height: 100px;
overflow: auto;
}
UPDATED DEMO
I have this CSS table code:
.navgroups table#rightTable {
float: right;
width: 33%;
}
.navgroups table#leftTable {
float: left;
width: 33%;
}
.nvagroups td#centerTable {
margin: auto;
}
In the middle table I want to insert an image, but the problem is bigger then just 33% (image size).
Every single letter in the middle table lowers the left table from the bar.
I tried the display:inline and display:inline-block.
I will just put this as an answer and I don't think anyone can get much better then this with the information you provided.
HTML:
<table class="rightTable">
<tr>
<td></td>
</tr>
</table>
<table class="leftTable">
<tr>
<td></td>
</tr>
</table>
<table class="centerTable">
<tr>
<td>
<img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
</td>
</tr>
</table>
CSS:
.rightTable {
float: right;
width: 33%;
}
.leftTable {
float: left;
width: 33%;
}
.centerTable {
margin: auto;
width: 33%;
}
table {
outline: 1px solid;
}
img {
width: 100%;
}
This is 3 tables all 33.33% with an image that fits in the center one.
DEMO HERE
And in this demo below we have text in the other tables. Works fine.
DEMO HERE
Update:
Demo of using 1 table instead of 3.
DEMO HERE
Here is my idea. Something like this:
<style>
table {
width: 100%;
border: 1px #cccccc solid; /* for cells preview */
}
td.left, td.right {
width: 33.33%;
background-color: #f0f0f0; /* for cells preview */
}
td {
border: 1px #cccccc solid; /* for cells preview */
height: 400px;
padding: 0;
}
td.middle {
text-align: center;
}
td.middle img {
max-width: 100%;
max-height: 100%;
}
</style>
<table>
<tr>
<td class="left">
Left cell content
</td>
<td class="middle">
<img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
</td>
<td class="right">
Right cell content
</td>
</tr>
</table>
I have a table cell that I would like to split into 4 pixel perfect equal 'sections'.
This is being done by having 3 divs that are 1px wide (lines) these are then positioned using margin-left on top of another div.
I'm doing this in jQuery as we need to account for the extra space taken up by the lines.
I have this working fine.. but all of the sections are not exactly the same width. I have taken into account (I think) the 3 lines by removing 3px from the width of the cell and then dividing the remaining into 4 (4 sections...) As the cell gets bigger so does the difference in section size.
This could of course be done in pure CSS by have the width of the lines in % instead of px. BUT having the lines at 0.5% does not render well. I prefer 1px.
I have a feeling I'm missing something simple?
Here is the fiddle.
http://jsfiddle.net/sQAg2/
Code:
<style>
body {
padding: 30px;
}
.testTable {
margin: 0 auto;
border: 1px solid #f9f9f9;
width: 100%;
}
.testTable tr th {
padding: 10px;
border: 1px solid #c1c1c1;
box-sizing: border-box;
}
.testTable tr th:first-child {
width: 30%;
}
.testTable tr td {
background: #f9f9f9;
border: 1px solid #c1c1c1;
box-sizing:border-box;
}
.line {
position: relative;
background: #000;
width: 1px;
min-height: 20px;
float: left;
z-index: 9999;
}
</style>
<table id="" cellspacing="0" cellpadding="0" class="testTable">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="position: relative; width: 100%; overflow: hidden;">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="block" style="width: 50%; min-height: 20px; background: green; z-index: 1; margin-left: 30%;"></div>
<div class="" style="clear: both;"></div>
</div>
</td>
<td>Testing 2</td>
<td>Testing 3</td>
<td>Testing 4</td>
<td>Testing 5</td>
</tr>
</tbody>
</table>
<script>
var cellWidth,
lineMargin;
// Get the width of a cell and remove 3px due to 3 x 1px lines?
cellWidth = $('.testTable tbody tr:first').find('td').width() - 3;
// divide by 4 due to 4 sections
lineMargin = (cellWidth / 4);
$('.line').css('margin-left', lineMargin);
</script>
Assuming you don't need IE8.
margin-left: calc(25% - 1px);
I tried looking around SO, but I can't really figure out anything that works.
As the title says, I need to align two divs to be centered and side by side.
<div id="wrapper">
<div id="dashboard" style="width: 70%;">
<h3 id="dash" style="color:#99FF00; font-family:monospace;">
<table style="color:#99FF00; font-family:monospace;" cellpadding="7">
<tr>
<td>generation</td>
<td>1</td>
</tr>
<tr>
<td>currently living</td>
<td><p id="initial_current"></p></td>
</tr>
<tr>
<td>recently newborn</td>
<td>0</td>
</tr>
<tr>
<td>recently died</td>
<td>0</td>
</tr>
<tr>
<td>recently surviving</td>
<td>n/a</td>
</tr>
</table>
<table style="color:#99FF00; font-family:monospace;" cellpadding="7">
<tr>
<td>total living</td>
<td><p id="initial_total"></p></td>
</tr>
<tr>
<td>total newborns</td>
<td>0</td>
</tr>
<tr>
<td>total deaths</td>
<td>0</td>
</tr>
<tr>
<td>total survived</td>
<td>n/a</td>
</tr>
<tr>
<td>the answer to life</td>
<td>?</td>
</tr>
</table>
</h3>
</div>
<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;">
</div>
Basically, the 'wrapper' is the parent div. I want to center 'dashboard' and 'board'. I hava javascript generating the text within 'board'.
I roughly want it looking like this:
Use position absolute and declare the margins as follows and you are good to go
Demo
<style>
.container {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px; /* Half of width */
margin-top: -50px; /* Half of height */
}
.left {
float: left;
width: 150px;
}
.right {
float: right;
width: 150px;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Note: Don't forget to clear floats using clear: both; else use overflow: hidden; on the container div, currently am using height: 100%; so no issues here
solution without floating: http://jsfiddle.net/GzvJH/
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
and css:
.container{
width: 500px;
height: 500px;
line-height: 500px;
text-align:center;
border:1px solid red;
}
.child{
width:100px;
height:100px;
border:1px solid black;
display:inline-block;
}
<style>
.container {
text-align:center;
}
.twocolumns {
width:50%
display:inline-block;
}
</style>
<div class="container">
<div class="twocolumns">
<p>Look at me im in column 1</p>
</div>
<div class="twocolumns">
<p>Look at me im in column 2</p>
</div>
</div>
I hope that helps!