Picture this:
I have a parent element that has a max-width of 800px but otherwise no min-width, filling the available space using
flex: 1;
Now, I’d like for this element to have a child table, which I would like to overflow when the parent element shrinks. That is, I’d want the max-width of that table to be the current width of the parent element.
The situation could probably be summarized as such:
<main style="max-width: 800px; flex: 1;">
<article style="width: 100%; max-width: 100%;">
<!-- some more elements wrapping the table, also being set to 100% width & max-width -->
<table style="overflow-x: scroll; width: 100%; max-width: 100%;"></table>
</article>
</main>
This doesn't work. Instead of stopping at the current width of the main component, the table expands to 800px and only then overflows.
How could I solve this?
Here's some minimal working code demonstrating the problem:
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
background: red;
}
main {
flex: 1;
width: 100%;
max-width: 800px;
background: white;
}
article {
width: 100%;
max-width: 100%;
}
div {
width: 100%;
max-width: 100%;
overflow-x: scroll;
}
table,
tbody {
max-width: 100%;
background: green;
width: 100%;
}
td {
white-space: nowrap;
}
<html>
<body>
<h1>
What I need is for the main component to be able to shrink below its max width when the window shrinks, and for its children to overflow when it does. What happens now is that overflowing children force the main element to be at max height.
</h1>
<main>
<article>
<div>
<table>
<tbody>
<tr>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
</tr>
</tbody>
</table>
</div>
</article>
</main>
</body>
</html>
After playing around some more with the CSS properties, the solution to my problem was adding display: flex and min-width: 0px to the <main> element's parent.
Related
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I am having some trouble formatting DIVs. I'm not much of a web guy so sorry if this question is a little silly.
Currently in my web page I have a Form with 3 divs inside. One div lays on-top, and the other two lay abreast:
However if the bottom two divs are both set to 50% width of the container they will stack vertically. If set to 50% and 49% they will stay abreast but there is a large ugly gap:
Here is a simplified version of the HTML, the styling is included.
<form id="Form1" style="width:100%">
<div id="Div1">
<table id="Table1" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div2" BorderWidth="1" Style="display: inline-block;
width: 49%; float: left;">
<table id="Table2" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
<div id="Div3" BorderWidth="1" Style="display: inline-block;
width: 50%; float: Right;">
<table id="Table3" cellspacing="1" cellpadding="1" width="100%">
Table Stuff
</table>
</div>
</form>
Thank you for your help.
I would use flexbox.
Use tables for tabular data and not layout.
You will need to account for the width the border adds to your element's width. The simplest fix is to apply box-sizing: border-box; to those elements. This will tell the browser to include the border when calculating the width.
i.e. If you tell an element to have a width and height of 200px and give it a 5px border, without box-sizing: border-box; your element will have a width and height of 210px ( 5px + 200px + 5px ). With box-sizing: border-box; the border is included in the width so the width and height remain 200px and the border is placed within, reducing the available space for content.
div {
min-height: 100px;
}
form {
display: flex;
flex-wrap: wrap;
}
div {
box-sizing: border-box;
}
div:nth-child( 1 ) {
width: 100%;
border: 1px solid red;
}
div:nth-child( 2 ) {
width: 50%;
border: 1px solid green;
}
div:nth-child( 3 ) {
width: 50%;
border: 1px solid yellow;
}
<form>
<div></div>
<div></div>
<div></div>
</form>
That's because the border-width. If you puts 50% + 50% + borders is more than 100%. I don't remember right now but exist a css property or something similar that's allows to the border to be included to the % of width. That will fix your problem.
What I am trying to do is to have 4 images align in a cross like pattern. I was thinking of using a table, but I do not want the corners, which will be while space to be the same as the image. And I want to be able to use different size images without having the page change if the image is a different dimension. I do not know how to approach this.
Below is an image of a rough sketch of what I am trying to do. One thing is that the images might be taller or longer.
Thanks in advance.
One solution would be to create invisible div elements that occupy the same height as your images, and inject them in the correct locations in the HTML:
div, img {
float: left;
width: 33%;
height: 100px;
}
See the fiddle with same image sizes here.
You can slightly modify this to use variable heights for your images by wrapping each row in its own div, then setting them height of each of those:
.top *, .middle *, .bottom * {
float: left;
width: 33%;
height: 100%;
}
.top, .bottom {
height: 100px;
}
.middle {
height: 200px;
}
See this fiddle for variable heights.
Update:
There's also the option to change the 'inset' of the middle row by giving the div a smaller width and adding margins to the two images in the middle row:
.middle div {
width: 20%;
}
.middle img:nth-of-type(1) {
margin-left: 6.5%
}
.middle img:nth-of-type(2) {
margin-right: 6.5%
}
Fiddle demonstrating this.
You can always play around with the width of the invisible div and the margins in order to get the desired output :)
Note that I've used widths that add up to 99% in these examples. You can get more specific if you'd like, but you'll never be able to reach 100% ;)
Hope this helps!
Here is another option using Flex-box
this solution can accommodate images of different sizes
and you can read more about it here
.wrapper {
font-size: 150px;
/* <-- adjust this to proportiantly scale everything */
outline: 1px dotted red;
}
img {
width: 1em;
}
.container,
.row-container {
display: flex;
width: 3em;
}
.container {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.row-container {
justify-content: space-between;
flex-direction: row;
}
<div class="wrapper">
<div class="container">
<div>
<img src="http://placehold.it/100x150">
</div>
<div class="row-container">
<div>
<img src="http://placehold.it/150x120">
</div>
<div>
<img src="http://placehold.it/170x110">
</div>
</div>
<div>
<img src="http://placehold.it/190x200">
</div>
</div>
</div>
And here is a table solution
which can also use images of varying size with radius corners
td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td><img src="http://placehold.it/310x120"></td>
<td></td>
</tr>
<tr>
<td><img src="http://placehold.it/175x110"></td>
<td></td>
<td><img src="http://placehold.it/300x150"></td>
</tr>
<tr>
<td></td>
<td><img src="http://placehold.it/280x100"></td>
<td></td>
</tr>
</table>
I know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
How do you prevent a td to grow wider than the table max-width? I cannot set the size in pixels, as it is used to fill up the rest of the width of the table. And when I set max-width to 100% this seems to be its content width.
<div class="content" style="width: 200px; max-width: 200px;">
<table class="outer-table" style="width: 100%; max-width: 100%;">
<tr>
<td style="white-space: nowrap; max-width: 100%; background-color: yellow;">
<div class="inner-div" style="width: 100%; max-width: 100%; overflow: scroll;">
This is a table width to much content. I use "white-space: nowrap" to force it to grow wide.
</div>
</td>
</tr>
</table>
</div>
See it in action: http://jsfiddle.net/TxqT4/1/
just remove white-space: nowrap from your td style
using nowrap property you are forcing td content to stay inline ie. no line break that's why it is creating the problem
See here Update code