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
Related
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.
<div className="container">
<div className="left-area">
<div className="container2">
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to truncate that very long text.
.container {
margin-top: 20px;
width: 90%;
display: flex;
.left-area {
flex: 1 1 20%;
.container2 {
flex: 1 1 20%;
table {
width: 100%;
}
}
}
}
I tried to use this css on the td cell
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
The missing key is table-layout: fixed.
table {
width: 100%;
table-layout: fixed;
}
td {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
With table-layout: auto (the default setting), the browser uses an automatic layout algorithm that checks the content size to set the width of the cells (and, therefore, columns).
The width and overflow properties are ignored in this scenario, and ellipsis can't work.
With table-layout: fixed, you can define the width of the cells on the first row (and, therefore, set the column widths for the table).
The width and overflow properties are respected in this case, allowing the ellipsis function to work.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
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 have:
<div id = "first" style="overflow-y:auto;">
<td colspan="2" style="background: #EFF4F8;"><div
id="second" style='height: 100px; word-wrap: break-word; overflow-y: auto; width: 100%; min-width: 580px; line-height: 200%;'>
<pre style="white-space: pre-wrap;">${some_text}</pre>
</div></td>
</div>
if "some_text" width is larger than my screen so I have scroll on all screen, I want the scroll only for div ="second" or for my pre tag. The problem is that I can't change div="first", I have to use it as is. Can you help me?
Thanks,
Your markup seems wrong, but this should be your solution. Let me know how it turns out and I will update the answer to your needs. And use CSS:
CSS
#first {
overflow-y:auto;
}
#second {
height: 100px;
word-wrap: break-word;
overflow-y: scroll;
width: 100%; /* This might still mess up the overflows of parent- and child-tags in different browsers */
min-width: 580px; /* This does not work well in all browsers */
line-height: 200%;
}
#second pre {
white-space: pre-wrap;
}
HTML
<div id="first">
<table>
<tbody>
<tr>
<td colspan="2" style="background: #EFF4F8;">
<div id="second">
<pre>${some_text}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You want to scroll across the width, that is a horizontal scrollbar.
You should be adding overflow-x
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/