I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div does not reflect the size of its child. I have an example here, it's a responsive page, but the problem only happens at low widths - at high widths it is fine.
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" width="400" height="100" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
js fiddle here: http://jsfiddle.net/GrimRob/qg75arbs/
You should consider using table-layout: fixed and some width on the table or cells.
Relevant CSS:
table {
table-layout: fixed;
min-width: 960px;
}
table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. That works if you've some indication of width wanted, like a min-width: http://jsfiddle.net/qg75arbs/1/
A simple min-width on table without table-layout: fixed also works, depends on your requirement.
Removing table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells.
Add this to your #content css if you want the table to push out the containing div.
display: table-cell;
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all;
width:100%;
}
.img1 {
min-width:200px;
width:100%;
height:auto;
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" class="img1" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image.
In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size.
Related
I was trying to make image table that fill window.
The following is my full source:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ready</title>
<style type="text/css">
html,
body {
min-width: 2048px;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="player_buttons">
<tr class="team" id="team_A">
<td class="playerimg">
<img src="../assets/profiles/1.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/2.png" />
</td>
<td class="playerimg">
<img src="../assets/profiles/3.jpg" />
</td>
</tr>
<tr class="team" id="team_B">
<td class="playerimg">
<img src="../assets/profiles/4.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/5.jpg" />
</td>
<td class="playerimg">
<img src="../assets/profiles/6.jpg" />
</td>
</tr>
</table>
</body>
</html>
It is work when the images are small enough,
But in the case of image has big size, table (=.player_buttons) ignore its height (it over body and HTML's height).
I think image keep its aspect and min-size is problem.
How can I adjust images to their cell size?
Thanks.
ADD.
.playerimg img {height: 500px;}
-> it works (but I don't want to set height to 500px)
.playerimg img {height: 10%;}
-> ignore height.
html,body {
margin:0px;
}
.player_buttons {
table-layout:fixed;
height:100vh;
width:100%;
margin:0px;
}
.playerimg {
height:50vh;
}
.playerimg img {
height:100%;
width:100%;
}
Since you want to fit your images within your browser window, vh is a good option. This code isn't responsive but I hope it is what you're looking for.
What i would like to suggest you is that dont take min-width of body as 2048px because it is spanning more area in some screens,instead you should use min-width as 100% as will fit perfectly in every screen also take max-width and max-height attribute in your img tag,in that way height of your image will not overflow.Just paste the following code inside your <style></style> tag instead of your code.
html, body {
min-width: 100%;
height: 100%;
}
.player_buttons {
table-layout: fixed;
height: 100%;
width: 100%;
}
.playerimg img {
max-width: 100%;
max-height: 100%;
}
I hope it helps.Comment for further query
I have a div which is marked as display: table-cell. Inside this I have a table which isn't wide enough to fill the div, but I want it to. How do I do this?
<html>
<head>
<title>Test</title>
<style type="text/css">
#content {
padding: 10px;
background-color:red;
display: table-cell;
}
</style>
</head>
<body>
<div id="content">
<table width="100%">
<tr>
<td>BitOfText</td>
</tr>
</table>
</div>
</body>
</html>
jsFiddle at: http://jsfiddle.net/GrimRob/gL7aar9h/
It works fine when display: table-cell is commented out.
Set the body display to table, make it 100% wide. Use this CSS:
body {
display: table;
width: calc(100% - 16px); /* 8px margin either side */
}
JSFiddle: http://jsfiddle.net/gL7aar9h/1/
Alternatively:
body {
display: table;
width: 100%;
margin: 0;
}
JSFiddle: http://jsfiddle.net/gL7aar9h/2/
Source: Why is width: 100% not working on div {display: table-cell}?
table-cell value makes element behave as a <td>.
So you need a container with 100% width to make table-cell work properly in 100% width:
<div style="display: table; width: 100%;">
<div id="content">
<table width="100%">
<tr>
<td>BitOfText</td>
</tr>
</table>
</div>
</div>
Good Luck!
I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.
What I want:
I have the following simple HTML:
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
The table itself should be 100% width of the parent container.
I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.
I've prepared a fiddle for this at http://jsfiddle.net/3bumk/
With these background colors I would expect a result like:
Is there any solution for this?
What I get:
My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.
What is no solution (I often found):
It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).
PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)
EDIT I am free to use divs instead of a table too!
Here is an answer using divs instead of a table: DEMO
HTML
<div class="container">
<div class="fnl first">First Baby</div>
<div class="fnl last">Last Guy</div>
<div class="adjust">I will adjust between both of you guys</div>
</div>
CSS
.container{
width: 300px;
}
.first{
float:left;
background: red;
}
.last{
float:right;
background: orange;
}
.adjust{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Something like this? http://jsfiddle.net/NhGsf/
By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;
And setting first and last child to fixed width the middle section will have the rest off the space
min-width in combination with width:100% seems to work in firefox and chrome:
tr {
td:first-of-type {
width: 100%;
}
td:last-of-type {
min-width: 200px;
}
}
I was facing the same challenge and I found the following solution using tables.
The HTML needs to use a DIV in the long column.
The CSS defines your small and extend classes. The hard part being the definition of the extend class.
This gives you the behavior you describe.
HTML
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">
<div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
</td>
<td class="small">Small column</td>
</tr>
</table>
CSS
table {
margin-top: 50px;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color: red;
}
table td:nth-child(2) {
background-color: green;
}
table td:nth-child(3) {
background-color: orange;
}
.extend {
display: table;
table-layout: fixed;
width: 100%
}
.small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can re-arrange the columns by moving the longest one at the end then use nested tables.
CSS
.extend
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
td
{
white-space:nowrap;
}
.box
{
width:1000px;
border:blue solid thick;
overflow:hidden;
}
HTML
<div class="box">
<table width="100%" border="1">
<tr>
<td class="small">First column with text</td>
<td class="small">Small column</td>
<td>
<table>
<tr>
<td class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Except for the ellipsis it is working well. See result
See this fiddle (or, alternatively), you need to set the max-width for each table cell:
body{
width:100%;
padding:0;
margin:0;
}
table {
margin-top: 50px;
width:100%;
max-width:100%;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color:red;
max-width:100px;
}
table td:nth-child(2) {
background-color: green;
overflow:hidden;
max-width:100px;
text-overflow: ellipsis;
white-space: nowrap;
}
table td:nth-child(3) {
background-color: orange;
max-width:100px;
}
I have a div inside a table that is overflowing the screen size. It looks like this:
<table id="hlavni" style=" position:absolute; border:none; position:relative; background-color:#FFC; border:#999 1px solid;" cellpadding="5">
<tr>
<td id="yamana" class="trida" valign="top" style="line-height:1.5em;">
<div style="background-color:#FFC;" id=load_tweets>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
</td>
</tr>
</table>
How can I prevent it from overflowing?
<html>
<head>
<style type="text/css">
#limit {
max-width: 500px;
}
</style>
</head>
<body>
<div id="limit">Your content goes here</div>
</body>
</html>
max-width and width -both- do not prevent the overflow if the text does not contain any spaces as in the example in the question.
div {
max-width : 300px;
word-wrap: break-word;
}
see this fiddle for a solution.
For this case, the div must have the style "word-wrap: break-word"
in order to work.
Or "overflow-wrap: break-word"
With max-width . Example : http://jsfiddle.net/YCV8H/
I have the following HTML.
<body>
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</body>
I need some help with the CSS to structure the page correctly.
I want the header to be 100% across the top which I can do.
But I want the "navdiv" to be a fixed 250px on the left of the page.
Then with the "mainarea" div taking the rest of the page to the right of the navdiv.
I then also want the table to stretch across the rest of the page.
I have tried several variations and some work however I can't get the table to stretch across the rest of the space, it just either jumps below the nav, goes too far past the other content or only sizes to the content within it.
Can anyone help?
This should work:
.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none; }
Explanation:
I'm essentially using the standard two-column overflow: hidden trick to force the main content to stay in its own column (as opposed to wrapping under the nav). position: relative on the main content is to set it as the table's offset parent, so we can use width: 100% on the table to push it to the width of the main area.
The height on the nav, the background color, and borders are for demonstration purposes only.
On the hacks:
No other (modern) browser requires margin-left: 260px, as that is covered by the overflow: hidden (forcing it into two columns).
Still, at that point, the table seems to clear to the bottom of the nav (again, only in IE6). This is solved by removing any default clear (not sure that's necessary), and floating it to the right, so it doesn't take into account the size of the nav.
Have a go with something like this, (untested)
#header{
width: 100%;
}
#navdiv{
width: 250px;
float: left;
}
#mainarea{
width: 100%;
float:left;
margin-left: 260px;
}
table{
width: 100%;
float: left;
clear: left;
}
You can use the following code. I wrapped your code with another div with class wrapper. You can modify the values. The navdiv class has 250px as you wish. You have to modify mainarea's
width with percent. This is according to wrapper width. Just play a little and you will find what is the correct percent to fit with the wrapper's width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stackoverflow code</title>
<style>
.wrapper {
width:900px;
height:400px;
}
.header {
width:900px;
height:100px;
}
.navdiv {
width:250px;
float:left;
height:100px;
}
.mainarea {
width:72%;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="navdiv"></div>
<div class="mainarea">
<p></p>
<table>
<tr>
<th scope="row">Name</th>
<th scope="row">Description</th>
<th scope="row">Created</th>
<th scope="row">Created By</th>
<th scope="row">Modified</th>
<th scope="row">Modified By</th>
</tr>
</table>
</div>
</div>
</body>
</html>
Try this: ?
.header{
width:100%;
overflow:hidden;
}
.navdiv{
width:250px;
float:left;
clear:none;
margin:0 10px 0 0;
}
.mainarea{
float:left;
clear:none;
overflow:hidden;
}
.mainarea table{
width:100%;
float:left;
clear:none;
}