I don't understand the different behavior between these two pieces of HTML:
<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR>
<TD style='height:100px'><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>
JFiddle: https://jsfiddle.net/ceyq6n10/
and
<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR style='height:100px'>
<TD><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>
JFiddle: https://jsfiddle.net/hmjvu5gf/
In the first example, the DIV is vertically expanded to 100% of the TD height. In the second one, even if the TD has the right vertical size, the DIV has height 0.
Could you please explain me why? Thanks
You use height: 100% for <div>, but didn't specify height to the parent <td>.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified.
css spec about height calculation
So when you use % for setting heights or widths, always set the widths/heights of parent elements as well.
By resizing the cells, we can control the row height.
You should apply such styling rules to the containers that hold actual content inside like text or other html. In this case, you td is actual container for content.
For tr tag, you can only put th or td inside a tr, and not the actual content. Style for screen space applies on tags which are actual content containers (like td, th), or actually themselves can grab screen space. tr is more of row de-marker.
You can apply things like background-color to tr, and it will work for td. Apply screen space rule to more specific content container.
Related
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
i want a table to render with minimum width according to its content, but IE7 insists on expanding it to 100% width.
The following little snippet works fine in Firefox and IE8, but not in IE7:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table { table-layout: fixed }
td { padding: 0 10px; border: 1px solid blue;}
</style>
</head>
<body>
<table>
<tr>
<td>Column with variable width</td>
<td style="width: 100px;">Column 2</td>
<td style="width: 100px;">Column 3</td>
</tr>
</table>
</body>
</html>
I have a table with table-layout: fixed.
I have specified the width of all cells except the first one.
In the first column, i want the browser to determine the width based on the content
As I don't know the width of the first column, I cannot (and do not want to) specify the width of the table.
Now, the problem in IE7 is that the table is rendered to 100% width. So the first col has not the minimum width that is required to display its content but takes up all the space to make the table 100% width.
Here is what i found out so far:
when i remove "table-layout: fixed" from the table, the table will not expand to 100%. Unfortunatly, that's not an option for me.
when i set the table-width to a very small size (like e.g. 10px), the first col will not be expanded to the minimum required width, but will disappear entirerly.
i tried to set "display: inline;" for the table, but that has no effects on the width.
Any ideas?
Thanks in advace,
Pitter
If only purpose of table-layout: fixed is to fix widths of cells, then you can add DIVs with desired width inside TD and get rid of table-layout: fixed for table.
The CSS specification on table-layout: fixed:
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
So you should definitely try to achieve whatever you need table-layout: fixed for by some other means.
<div style="width:500px;">
<p>To create not a block, but an inline code span,use backticks:Press the `<Tab>` key, then type a `$`.If you want to have a preformatted block within a list, indent by eight spaces: </p>
<table>
<thead>
<tr><th>Action</th>
<th>abc</th>
<th>xyz</th>
</tr>
</thead>
<tbody>
<tr><td>hihi</td>
<td>hihi</td>
</tr>
</tbody>
</table>
I set the div of width 500px, and under it I have p and table elemetns. The p element adjust to the width of the div, while the table has its own width, which doesnt necessarily adjust to fit into 500px. I don't know how this works, can anyone explain it to me? Thanks
By default, <table> elements adjust to auto fit their contents. If the contents don't need the full container, the space isnt taken. You can change this behavior by styling the table with:
<table style="width: 100%;">
In which case it will take all available width if possible.
I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.
My example is as follows:
<div style="width:880px; overflow:scroll;">
<table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
<tr><td></td><td></td><td></td></tr>
</table>
</div>
I have specified for all the <td> tags a width inside my CSS.
I don't understand why the <table> can't determine it's own width or just respect the widths of all the <td> tags.
Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.
Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.
<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</div>
Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.
Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.
See the example here.
I feel like this should be a no brainer, but clearly I'm missing something...
I'm stuck with an HTML table on a page, and need to absolutely position an element that is rendered inside of the table so that it can display properly when we apply DHTML to show it.
I tried absolutely positioning it relative to the bottom of a table row, but the browser (FF and IE) will not render it relative to the row. Instead it takes the positioning relative to the next parent above the row that has relative positioning.
Basically it is:
<table>
<tr class="aRelativelyPositionedClass">
<td>
<div class="anAbsolutelyPositionedClass">stuff I want to absolutely position</div>
</td>
</tr>
</table>
Is it possible to position the inner div relative to the row? Or is there an HTML issue I'm missing with tables?
According to the http://www.w3.org/TR/CSS2/visuren.html#choose-position discussion of relative: "The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."
The problem is that Firefox, Google Chrome, Opera and Safari have chosen for position:relative to do nothing on a table-row. IMHO, they should have implemented the change of frame-of-reference, so that absolutely-positioned subelements will be rendered relative to the table-row, but they didn't.
My need to absolutely-position elements in a row occurred in JavaScript, so I had an easy solution. If the element's display is table-row, change it to block, THEN set position:relative. I realize this doesn't help you if you're trying to do it all soley using HTML and CSS. But in my situation, setting display:block before position:relative worked.
I don't think that you can position it relative to the row, as the row is not really a visible element.
You should be able to position it relative to the cell by setting the style position:relative on the cell to make it a layer. Still the cell is not an independent element, so you may have to put another div in the cell and make that a layer instead to make it work properly.
(Tables are problematic for layout when you combine it with other techniques... Perhaps you should consider removing the table altogehter...)
CSS 2.1 Specification:
The effect of 'position:relative' on
table-row-group, table-header-group,
table-footer-group, table-row,
table-column-group, table-column,
table-cell, and table-caption elements
is undefined.
So the browsers fall back to the next parent whose behavior is considered defined: table.
One solution is to force those rows to display as blocks:
tr.aRelativelyPositionedClass {
display: block;
}
If there's nothing else in the table cell apart from the div you want to position, it's possible that it's collapsing to zero dimensions when you move the div out of the flow with the absolute positioning, and this is throwing your calculations out. Is there an explicit height set on the row or the cell?
Edit:
I think Guffa is correct. With just one div in the cell I couldn't get it to position relative to either the row or the cell. I think you could fake the effect you're looking for by adding some markup:
<table border="1">
<tr style="position:relative;">
<td><img src="http://sstatic.net/so/img/so/logo.png" height="61px" width="250px" alt=""/></td>
<td>
<div style="position: relative; height: 100px; width: 100px;">
<div style="border: 1px solid red; position: absolute; bottom: -10px; left -10px;">Position me</div>
</div>
</td>
</tr>
</table>
try in CSS
.aRelativelyPositionedClass td {
// your style
}
I believe you would have to explicitly state relative too.
Paste this in a file to see how it's done.
Remember to set the container's size. I did it in HTML here to keep the example short, but you should do that in CSS.
<table border="1" width="500">
<tr height="200">
<td>
<div style="position:relative;top:20;left:20">stuff I want to position</div>
<div style="position:relative;top:30;left:30">stuff I want to position</div>
<div style="position:relative;top:40;left:40">stuff I want to position</div>
<div style="position:relative;top:50;left:50">stuff I want to position</div>
</td>
</tr>
<tr height="200">
<td>
<div style="position:relative;top:20;left:20">stuff I want to position</div>
<div style="position:relative;top:30;left:30">stuff I want to position</div>
<div style="position:relative;top:40;left:40">stuff I want to position</div>
<div style="position:relative;top:50;left:50">stuff I want to position</div>
</td>
</tr>
</table>
The solution is very simple: Put a DIV position=relative, immediately inside the TD.
TR and TD elements don't support 'position' being set -- so they can't be properly set to 'position=relative', to be the container for your positioning.
This is CSS specification & browsers use special CSS position-values to implement row & cell behaviour of the table.
<td>
<div style='position:relative;'> <!-- relative container for positioning -->
<!-- DIVs to be positioned, go in here. -->
</div>
See also:
Using Position Relative/Absolute within a TD?