I have a div within which a table would lie. Now I want this div to have its width set automatically to the width of table within it.
For example:
<div>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Sample</td>
<td>Table</td>
</tr>
</table>
</div>
I tried giving float: left; property to it. It works, but then it creates another problem. Whatever content is put after this div gets placed to the right of it in the empty space.
What needs to be done?
You are effectively attempting to change the display model of that div element, so you should change it's CSS 'display' property as follows:
div{
display: inline-block;
}
Here's a jsFiddle demonstrating the solution.
You have to clear the float after your div by adding style="clear: left;" on your consecutive element:
<div style="float: left;">
<table>...</table>
</div>
<div style="clear: left;">
...
</div>
This is quite new but...
If you don't want the element to become inline-block, you can do this:
.parent{
width: min-content;
}
You have a lot of other options for configuring the width. Read more here: http://caniuse.com/#search=intrinsic
You need to clear the float explicitly in order to not impair subsequent elements by the float. See this article for details.
If i understand correctly, you want the div to be as wide as the table but not any wider. Since the div-element is a block element, it will always be as wide as it can be unless you give it an explicit width.
Your choice is to either add the style display:inline or use an inline-element like "span".
Related
I am trying to place a hyperlink vertically so it's to the middle of the height of a textbox but it's not working for me.
Here's the jsfiddle example. I want to do this without using Javascript, works in IE6+, the two elements need to be in the same td column, without using hard coded pixels, and the hyperlink to be right next to the right edge of the textbox (like it's shown in the example, just move it upward to the middle of the yellow box).
As long are the textarea and a elements are inline elements, they will share their base line. If you float the elements, you can set the line height of the a element to match the height of the textarea:
textarea { float :left; }
a { float: left; line-height: 6em; }
Demo: http://jsfiddle.net/Guffa/aLtXA/6/
Well, if you are willing to nest tables, this will work:
<table>
<tr style="vertical-align:top">
<td>
<table>
<tr style="width: 500px;">
<td>
<textarea cols="45" rows="5"></textarea>
</td>
<td style="background-color:yellow; vertical-align:middle">
Edit
</td>
</tr>
</table>
</td>
<td>
second cell
</td>
</tr>
</table>
but I hate this level of nested hell. It leads to madness and grey hair.
I hope someone will post a nicer answer.
Is it possible perhaps with the twitter bootstrap?
Here you go: http://jsfiddle.net/aLtXA/16/
I put vertical-align:middle on the TEXTBOX and anchor. As well, I removed the vertical-align from the table cell.
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
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'm trying to do the following: http://www.pastebin.org/113337
I'm wondering why the scrolling won't take place? It just stretches the table. Try running the code with and without white-space: nowrap and see how it differs. Whenever I apply nowrap my table gets stretched. How do I avoid this?
I'm pretty sure that's just how tables work; they stretch when there's too much content in one of their cells.
Try putting a <div> inside your <td> and apply the width and overflow properties to that instead.
Addendum:
Your table has a CSS width property of 150px while the div has a percentage, %100. Try giving the <div> a non-percentage width...
<table>
<tr>
<td>
<div style="150px;">
<!-- wtv -->
</div>
</td>
</tr>
</table>
Or try putting the whole <table> in a <div> with a fixed width...
<div style="width:150px">
<table>
<!-- wtv -->
</table>
</div>
... lastly, I'd advise that you put your CSS in an external .css file ;)
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?