I am trying to have a div with a horizontal scrollbar inside a table that has 100% width:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
I don't know why, but all browsers display #div2 1000px wide instead of 800px. Why is that?
How can I achieve displaying it only 800px wide and have a scrollbar inside #div2?
I don't want to specify the exact width for the <td> tag.
Wrapping div2 inside a single cell table with style="table-layout: fixed; width: 100%" appears to be a solution. See http://jsfiddle.net/gvqVN/1/.
As I remember, the div-s and table-s don't like each other :) Try to give the 800px width to the div2. Also use overflow:scroll to have the scrollbars Here is the JSFiddle
And the code:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
<table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
<tr>
<td>
<div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;">
<div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
</div>
</td>
</tr>
</table>
</div>
To div id div1 add overflow: hidden
Your first line should looks like this:
<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">
Because #div2's child element (#div3) has the width of 1000px.
You'll have to change the 100% width on div2 with 800px, otherwise it'll just take the width of its child div3.
EDIT: If you can't use fixed width, you could set all table elements to display:block - standard tables have a very awkward way of handling dimensions, which is why your example didn't work.
Downside of this solution is, of course, that your table won't react like a table anymore...
http://jsfiddle.net/WKG5F/
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 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>
I am trying to layout a couple of div's inline and want to give them a fixed width. I currently have:
<style>
.af-header{
border: 1px solid black;
}
.menu-item-header{
border: 1px solid blue;
width: 200px;
}
.menu-item-detail{
border:1px solid orange;
width: 400px;
}
.menu-item{
border: 1px solid red;
}
</style>
<table class='af-header'>
<tr>
<td width=800>
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
The problem that I'm having is that the menu-item-header and menu-item-detail collapse down to fit the text like in the following screenshot:
How do I fix the width in these two so that the width is respected?
Use display: inline-block not display: inline.
Use display:inline-block for your div elements to put them in line
.af-header div
{
display:inline-block;
}
Js Fiddle Demo
I'm not sure why are you using table here, if it only to take the advantage of column effect then you don't need to use it. You can use just div to achieve the same
<div class="af-header">
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</div>
Js Fiddle without table
Can someone explain why the two table layouts below aren't the same (specifically, why the second 'table-cell' div doesn't stretch to take up the rest of the width of the 'table' parent div, as it does in the real table)?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div style="width: 100%; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td style="width: 20px; border: 1px solid red;">.</td>
<td style="border: 1px solid red;">.</td>
<td style="width: 20px; border: 1px solid red;">.</td>
</tr>
</table>
</body>
</html>
Edit: turns out you get some unexpected behaviour if you try and style an image as a table-cell:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
img {
height: 21px;
width: 21px;
}
]]></style>
</head>
<body>
<div class="table">
<div class="row">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
<div class="cell">
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
</div>
</div>
</body>
</html>
The 2nd cell-styled div doesn't stretch all the way horizontally to fill the rest of the table width. If you add content to it, it gradually does though. Weird.
Unless the a table-cell element's parent is a table-row element (and its parent element is a table element) or table element, anonymous table and table-row elements are inserted for you. Anonymous elements cannot be styled.
If you want your table-cell elements to take up the entire available width, you need to make an explicit table element to contain them for styling purposes.
http://tinker.io/29b92
<div style="width: 100%; display: table; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
Turns out the answer was 'images don't reliably style as table-cells', but I mis-simplified my initial test case. Thanks all!
You should work with tables inside other tables if you want one of your rows to expand to the same width.
Also, if your parent table is 100%, your child table can't be 100% as well, have you tried 98%?
Style your HTML in and external CSS file to prevent repeating your clause every line.
If that doesn't work, let me know and i will keep looking for more options you can try.
I have recently come across a strange issue with an overflow auto div inside a table cell (yes I have to keep the table).
The text inside the div will NOT wrap when it is inside the table. If I put the div in another div to wrap, it works perfect.
My temporary solution is to use javascript to force the width but this is poor and does not deal with re-sizing very well.
If anyone has any thoughts I would be happy to hear.
See the code here:
http://jsfiddle.net/jNZNF/
<table style="width: 400px;" border="1">
<tr><td>
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue;">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\male\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</td></tr></table>
<div style="width: 400px; border:1px solid pink">
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\mal e\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</div>
Add the word-break:break-all rule to your table (or div within the table). Since you have essentially one long string (no spaces), the browser won't break it unless you force it to.
jsFiddle example
Unless I misunderstood you, this should do it:
<table style="width: 400px;" border="1">
<tr><td>
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue;">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\male\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</td></tr></table>
Fiddle: http://jsfiddle.net/ayAh7/1/
<div style="width: 400px; border:1px solid pink">
<div style="width: 100%; overflow: auto; height: 200px; border: 1px solid blue">
ip\84.23.214.125:27960\name\Ze_Pequeno\password\bs\racered\1\raceblue\0\rate\25000\ut_timenudge\30\cg_rgb\153,0,0\funred\tridente\funblue\katana\cg_predictitems\0\cg_physics\1\gear\FHAOWRA\snaps\20\model\sarge\headmodel\sarge\team_model\james\team_headmodel\*james\color1\4\color2\5\handicap\100\sex\mal e\cl_anonymous\0\teamtask\0\cl_guid\49B4985AFD5E18C17EAC67AF5A6F4247\weapmodes\00000111220000020000
</div>
</div>