I have the following code:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td. The following illustrates the results you get with the position: relative (1) on a div good), (2) on a td(no good), and finally (3) on a div inside a td (good again).
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>
This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.
<td style="display: block; position: relative;">
</td>
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
With regards to your second attempt, did you try using vertical align ?
Either
<td valign="bottom">
or with css
vertical-align:bottom
also works if you do a "display: block;" on the td, destroying the td identity, but works!
Related
I have an issue, described in title. I have a table, div inside td of this table.
I want to position this div relative to table row, so I set tr position to relative and div position to absolute. It works fine in Firefox, but in IE it works unexpectedly for me.
There is a code:
<div class="container">
<div class="panel"></div>
<table>
<tbody>
<tr>
<td>a</td>
<td>s</td>
<td><div class="problem-div">i'm here</div></td>
</tr>
</tbody>
</table>
table {
border: 1px solid;
table-layout: fixed;
width: 100%
}
tr {
position: relative
}
.panel {
height: 50px;
background-color: red
}
.problem-div {
position: absolute;
top: 0;
left: 0
}
There is fiddle
http://jsfiddle.net/L7nczrsp/5/
Help me to understand what I'm doing wrong, please.
UPDATE1
Thanks to #James we now know that position for table elements is undefined http://w3.org/TR/CSS21/visuren.html#propdef-position
But, we can set td position to relative instead of setting this styles to tr. It works fine. But it still conflicts with w3.
But Thanks to #ShabanKhan for idea, we can put relative positioned div into td and put our problem-div into this div. Seems to work. There is updated fiddle http://jsfiddle.net/meatwas/akkLxjpp/1/
Positioning do not work on table properties try to add a div to make it position relative.
If you add position: relative to the table, so it works well in Chrome, FF and Safari
There is your on jsfiddle example with this idea.
I want to show two table in same line. Then I'm using float: left; Like this.
If those tables width more than the container I use overflow: hidden; to hide the surplus.
Overflow hidden working perfect but the table not stay at the same line.
http://jsfiddle.net/bULcB/3/
How can I fix that. I want the table stay at the same line.
Add a container div to wrap the two tables. And then make its width great enough to hold the two tables in a line. The overflow part of the container will not be shown as the parent div has specified overflow: hidden;.
See updated example on jsFiddle
Give position: relative to your parent element and give position: absolute; top: 0; left: 100px; to your second child element (remove float property from second child element).
Working Fiddle
or else
Give White-space: nowrap to your parent element and give display: inline-block to your child elements instead of float: left.
Works only in latest version of browsers.
Working Fiddle
div style="width: 300px; overflow: hidden; ">
<table cellspacing="0" cellpadding="0" style="float: left; background-color:red;">
<tr>
<td>First Table</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;">
<tr>
<td>Second Table</td>
</tr>
</table>
How to force images to overflow in table cells without expanding the cells?
EDIT:
Sorry, I'll provide some more information. This is the table:
<table class="content">
<col width="200px" />
<col width="560px" />
<col width="200px" />
<tr>
<td colspan="3" class="logo"></td>
</tr>
</table>
CSS:
.logo
{
height: 120px;
background: url('img/wallpaper.png') center;
}
I thought there would be a simple solution...
If you use an <img> tag instead of a background image, you could remove it from document flow with position: absolute;
html
<td class="logo">
<img src="img/wallpaper.png">
</td>
css
.logo img {
position: absolute;
}
This will let the image overflow the cell, but creates other side-effects you would need to deal with. Update top or bottom accordingly to keep the image in place.
Adjusted css
.logo img {
position: absolute;
top: 15px;
}
Check out http://jsfiddle.net/QMNRp/1/
You're asking for an element's background to escape into the foreground. This isn't possible. An element's background can only be as large as the element itself.
To make the .logo image the same dimensions as the containing cell you could make use of the background-size property, but this isn't supported in older browsers.
Set Static Width to td's and set overflow to visible and text-wrap:nowrap; or word-break to keep all for text in tables
td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap; //for text
word-break:keep-all; // for text
}
Html:
<br/><br/><br/><br/><br/>
<table>
<tr>
<td class="container">
<button class="del">delete</button>
</td>
</tr>
</table>
<br/><br/><br/><br/><br/>
<div class="container">
<button class="del">delete</button>
</div>
Css:
.container {
position: relative;
border: 1px solid red;
height: 50px;
width: 200px;
}
.del {
position: absolute;
top: 3px;
right: 3px;
}
Why the button inside a div will be placed on the top right corner of the div, but the one inside a td will be placed outside the table?
How to fix it?
See active demo: http://jsfiddle.net/Freewind/d6Tug/
I think it has something to do with the display style of a td, which is table-cell. If you set it to display:block, it will work correctly.
Just add display:block to your .container style.
As freewind pointed out, it would be better to use inline-block if it is supported in your browser for td since td's are usually displayed in a row.
Giving an element position:absolute; places it relative to its containing block. Since a table cell is not considered a block container (unlike a div), it places it relative to the document body itself. top:3px; brings it 3px from the top border of the document and right:3px; moves it 3px from the right border.
http://reference.sitepoint.com/css/position
I need to place a scrollable div in a table cell. The table should be 100% height. The div has a lot of content that doesn't fit in the screen so scrolling should appear. But I want only the div to be scrollable, not the whole page.
If I don't use table, everything is perfect:
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px; border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
Div is scrollable, page has no scrollbar. But if it's wrapped in a table:
<table style="height: 100%">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
</td>
</tr>
</table>
page becomes scrollable, and the div ceases to be such. What can I do?
Shouldn't be height: 100%; and overflow: auto; on <td> ?
I think your main problem is that you cannot expect the div to go to 100% height, because the table that is holding it also has a % as its width.
The container of the div must have an absolute height.
This is my code:
<table height="2000px">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
Item 1<br/>
Item 2<br/>
...<br/>
Item 300<br/>
</div>
</td>
</tr>
</table>
Which uses a scroll bar on the div and because of its height also makes the page scroll bar appear.
Unforunately unless you use some hacky CSS work around (Which might won't work in all browsers) you cannot tell a div to be 100% height without giving its container an absolute height as I have done above.
If I am wrong I'm sure someone will correct me, but I have tried to give divs 100% height to fit the browser window in the past without CSS or Javascript hacks and failed.
Tables actually use minimum height, so whenever your div gets bigger than what you want, the table column is actually just resizing to fit your div, and so your div percentage is rendered useless.
You need to use divs, not tables.
You should change table-layout css property to "fixed" value.
<table style="table-layout: fixed; width: 100%;">
<tr>
<td>
<div style="overflow: scroll;">
Scrollable div
</div>
</td>
</tr>
</table>