I want to achieve this thing:
Height of table row and grey line should be dynamic depend on contents in right column.
I've read in How to make <div> fill <td> height, so I tried with this http://jsfiddle.net/hyNWy/
But still no luck. Any suggestions?
With a colon? Also, to get your spacing:
<td style="position:relative;">
<div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
</div>
</td>
EDIT:
I don't think it's possible without specifying an explicit height. The solution in the original question that you pointed to does not actually work. position:relative does not seem to apply correctly to table cells. This could well be intentional and part of the spec.
Did you try
<table>
<tr>
<td>
<div>
</div>
</td>
</tr>
</table>
with
tr { }
td { position:relative;height:300px; display:block; }
div {
width:10px;
position:absolute;
bottom:10px;
top:10px;
display:block;
background:grey
}
Here's a jsfiddle of that.
Related
I have a table inside a overflow:scroll container, there are some buttons inside table, when someone click them, they show a contextual/tooltip (position:absolute layer) text.
When I scroll to the right and click the button, it moves outside to the right ignoring scroll:
Making container position relative solves the position problem, but its appear inside the container not showing the menu:
I need help to get the following desired behavior:
This is the snippet:
.container{
width:200px;
height:100px;
overflow:scroll;
position:relative; /* removing this solves the problem, but .contextual moves to the original position */
}
.board{
width:400px;
}
.contextual{
display:none;
position:absolute;
width:100px;
height:100px;
margin: 20px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<table class=board>
<tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr>
<tr>
<td>this is a button with a contextual element</td>
<td>
<input type=button value="click me" onclick="$('.contextual').show();" />
<div class=contextual>This is a contextual help text.</div>
</td>
</tr>
</table>
</div>
For people who have this issue, but setting to mouse position won't help
If you have the same problem as me, that the parent container is set to overflow: scroll and the parent's child element is cut off despite position: absolute - do the following
Usecase for instance, building an dropdown
Set the element to position: fixed
Get the parent element's Viewport positions
Set the positions top, left, bottom, right values to the viewport values
you can use the same code as the code snippet from #jfeferman
Place the contextual div outside of the overflowing div and position it according to the mouse position.
showContext = function() {
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
var context = document.getElementById("contextual")
context.style.top = posY + "px";
context.style.left = posX + "px";
context.style.display = "block";
}
.container{
width:200px;
height:100px;
overflow:scroll;
position:relative; /* removing this solves the problem, but .contextual moves to the original position */
z-index:1;
}
.board{
width:400px;
}
#contextual{
display:none;
position:absolute;
width:100px;
height:100px;
background-color:grey;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="board">
<tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr>
<tr>
<td>this is a button with a contextual element</td>
<td>
<input type="button" value="click me" onclick="javascript:showContext();" />
</td>
</tr>
</table>
</div>
<div id="contextual">This is a contextual help text.</div>
You can use overflow: auto. This will show the scrollbars only when necessary. Also, you can remove the z-index: 2 from .contextual.
I'm having some trouble formatting a table! I want to make a table in which all the cells stay at an equal width and height. In other words, so they don't overflow.
I can make it so that the cells don't overflow in the x-axis, by using table-layout:fixed, but I'm having some trouble preventing the cells overflowing in the y-axis. I want this to be hidden as well, but for some reason the CSS isn't co-operating with me!
I won't go into detail, as this isn't related to the problem I'm having, but I'm not looking for an absolute solution such as having a height:50px style. I would like a general solution to prevent this overflow, please!
I've provided some sample CSS and HTML below. Please let me know if you need any clarifications! http://jsfiddle.net/pdtua295/1/
CSS
table.pztable {
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
width:100px;
height:100px;
}
td.pzcol {
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
vertical-align:middle;
}
span.pztext {
font-family:Tahoma;
}
HTML
...
<table class="pztable">
<tbody>
<tr>
<td class="pzcol">
<span class="pztext">Alice</span>
</td>
<td class="pzcol">
<span class="pztext">Bob</span>
</td>
</tr>
<tr>
<td class="pzcol">
<span class="pztext">S<br>T<br>R<br>E<br>T<br>C<br>H</span>
</td>
<td class="pzcol">
<span class="pztext">This won't stretch horizontally.</span>
</td>
</tr>
</tbody>
</table>
...
try this
word-wrap: break-word;
this will break even word
[I edited your code][1]
[1]: http://jsfiddle.net/pdtua295/1/
This isn't tested, but in the CSS for the td your should add height: 50px; white-space: nowrap; overflow: ellipsis; that should do it.
Replace your css with
give min width and max-width to table td like
`table.pztable{
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
}
td.pzcol{
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
min-width:150px;
max-width:150px;
}`
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
Just to frame you. Look at the following code.
Basically I have a table inside a div. When the table gets too big the overflow hidden triggers.
PROBLEM: in IE6 the "some text" gets hidden as expected but the floated span not.
Is there a way around of fix it?
#wrap{
overflow:hidden;
height:20px
}
span{
float:left;
height:10px;
width:10px;
background:url(image.jpg) no-repeat 0 0;
}
<div id="wrap">
<table>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
</table>
</div>
Try giving height:1%; for ie6 css. as below.
wrap{
overflow:hidden;
height:%;
}
I am trying to create a rounded header that could possible be multiple lines. My problem is that the left and right images start to repeat themselves if the text needs to go on another line.
Edit If you need the images: http://www.filedropper.com/corners
CSS
.Label
{
color:White;
}
.Left
{
background:url('images/tab_left.png') repeat-y;
height:auto;
width:12px;
}
.Middle
{
width:200px;
height:auto;
background:url('images/tab_mid.png');
font-weight:lighter;
background-repeat:repeat-x;
color:White;
vertical-align:middle;
padding-top:1px;
text-align:center;
}
.Right
{
background:url('images/tab_right.png') repeat-y;
height:auto;
width:12px;
}
HTML
<table style="height:auto;" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="Left"></td>
<td class="Middle"><asp:Label runat="server" ID="Label1" Text="Label1" CssClass="Label" /></td>
<td class="Right"></td>
</tr>
</table>
The images that you provided are for one-line only. If you want it to go multiple lines, you will have to do some extra work. Also the images have a gradient, so it will not be possible to use them for multiple lines.
On the other hand, JQuery offers a much simpler solution for rounded corners. A lot less pain and flexible.
Tutorials:Rounded Corners