<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>
<table>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?
I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.
<table>
<tr>
<td style="width:200px">Things</td>
<td style="text-align: right;">
<div class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?
That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.
Related
I expected all browsers behave the same, which is setting all tds in a table to the width of the largest width indication of all tds.
Take a look at the following examples:
https://jsfiddle.net/rpkbf4n6/
=> This one is displayed correct in FF/IE but wrong in Edge (the very long text is not wrapped)
https://jsfiddle.net/8oa4fw2u/
=> This one is displayed correct in FF/IE/Edge
Why is this? I don't like to give all tds the width attribute and I don't like to give the width attribute to the largest content td (because the content is filled dynamically, so I don't know which is the largest)
Add a DIV above the table and use table-layout: fixed then it works with Edge
<div class="wrap">
<table class="table">
<tbody>
<tr>
<td style="width:100px;">
<span>Text</span>
</td>
<td>
<input style="width:160px;">
</td>
</tr>
<tr>
<td>
<span>Very very very very very long text</span>
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
.wrap {
width: 500px;
}
.table {
width: 100%;
table-layout: fixed
}
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I have an HTML table three columns by four rows, and in the CSS I specify each cell's height and width in pixels. When the screen is large or small the cells appear the correct size, but somewhere in between large and small the width of the middle column gets squeezed and is much narrower than it should be. How can I keep the width constant?
I'm using Zurb Foundation for layout.
I tried it in the most recent Chrome (Version 32.0.1700.102) and
Firefox (26.0).
The problem occurs when the screen width is between approximately 640
and 800 pixels wide. Above that and below that is fine.
This is what the HTML looks like:
<div class="row">
<div class="large-3 medium-4 small-12 columns left">
<table>
<tr>
<th colspan="3">Header description</th>
</tr>
<tr>
<td class='key'>1</td>
<td class='key'>2</td>
<td class='key'>3</td>
</tr>
<tr>
<td class='key'>4</td>
<td class='key'>5</td>
<td class='key'>6</td>
</tr>
<tr>
<td class='key'>7</td>
<td class='key'>8</td>
<td class='key'>9</td>
</tr>
</table>
</div>
<div class="large-3 medium-4 small-12 columns left">
Other Content...
</div>
</div>
And this is the relevant CSS for the class 'key':
.key {
margin: 3px;
padding: 0;
height: 53px;
width: 53px;
border: solid 1px #fff;
text-align: center;
}
The code works fine. Which browser are you using? Try set the min-width property and if you are using responsive design make sure it is not overwriting the width property.
I have a div that contains two other divs, one floated to the right and one to the left, and both of these inner DIVs have a table each. I need the outermost div to contain the divs within it, but it doesn't. It seems as if the inner divs don't contain the inner tables. Because the outermost div has a border, I can see that its height is a lot shorter than the contained content.
<style>
.bluebox{ border:1px solid blue; }
.floatleft
{
float:left;
}
.floatright
{
float:right;
}
</style>
This is my HTML:
<div class='bluebox'>
<div class='floatleft'>
<table cellspacing=10>
<tr><td class='head'> Qty ordered: </td><td> 100</td> </tr>
<tr><td class='head'> Description: </td><td> Business Card</td></tr>
<tr><td class='head'>Stock: </td><td> SPRONDIGRLE WHITE</td></tr>
<tr><td class='head'>Lamination: </td><td> XXX</td></tr>
</table>
</div>
<div class='floatright'>
<table cellspacing=10>
<tr><td class='head'> Parent A3 Sheets: </td><td>XXX </td></tr>
<tr><td class='head'>Finish Size: </td><td> 9 x 5cm</td></tr>
<tr></tr>
<tr><td class='head'>Finishing touches: </td><td> Rounded corners</td></tr>
</table>
</div>
</div>
Since I need the border to show, I can't do something like padding-bottom:-5000px; overflow:hidden, because then the border will stretch the page by miles!
You need to clear your floats. The simplest way to do that would be like so:
.bluebox{ border:1px solid blue; overflow: hidden }
http://jsfiddle.net/LBfxY/
There are other ways to do this, but using overflow is the most concise. Here are some demos on other clearfix techniques:
http://codepen.io/cimmanon/pen/qDjdr
I have a link and an iframe side-by-side. I want the link to appear over the iframe. This occurs inside of a td element. this pattern is iterated over a few rows. When I use relative css positioning, I am able to display the link over the iframe, but the space the link would have been in, still appears. and it add unnecessarily to the column height. I want to eliminate this space. How can I do this?
I looked at this but it seems that this solution would still jack up the tr/td height. I also have a sample of my issue
Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/
HTML
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.google.com" ></iframe>
</div>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="collapse">
<a class="top" href="bing.com">link</a>
</div>
<div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.donotwant {
border:2px dotted green;
}
.top {
top:80px;
left:120px;
position:relative;
z-index:2;
background:red;
}
.bottom {
position:relative;
z-index:1
}
.collapse {
line-height:0px;
}
Change your HTML to this
<table>
<tbody>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe src="http://www.google.com" ></iframe>
</td>
</tr>
<tr>
<td class="donotwant">
<div class="top">
link
</div>
<iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
</td>
</tr>
</tbody>
</table>
And you CSS to this:
.donotwant {
border:2px dotted green;
position:relative;
height:180px;
width:300px;
}
.top {
top:80px;
left:120px;
position:absolute;
z-index:2;
}
.bottom {
position:relative;
z-index:1
}
A relative position object keeps it's initial placement but is displayed elsewhere. An absolute positioned element is actually moved to a new position. You can move absolute positioned elements on top of relative positioned.
In the example above I created a div that is relative positioned in which any absolute position element can be moved around from of the top left corner of the relative positioned element. If the relative positioned element is moved anywhere else on the page the absolute one will follow.
That unwanted space is from the DIV element you have wrapped around you link. Remove that.
http://jsfiddle.net/saad/grs53/12/
Just collapse the <div /> that holds the link (e.g. set height to 0). Cross browser might require additional styles but here is an example tested in Chrome