I'm having some trouble with the positioning of tooltips on a column of data within a table, which itself is inside a vertical scrolling div. A little background for you...
Due to legacy issues which are beyond my control, the page I am developing has to be displayed through an iframe of fixed width and height. The data I need to display has about 12 columns, all of which are required to be displayed. One column will contain serial numbers, which sometimes end up overflowing the bounds of the cell. I've set the overflow of this column to show an ellipsis, and have added tooltips as described in the accepted answer to this question.
When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell, and draw the tooltip that distance from the top of the parent div. This means that, when you scroll down through the div, the tooltips end up being drawn down below the bottom of the div.
I've created a jsFiddle which demonstrates this: http://jsfiddle.net/kuzxLwxe/4/
Here's my css:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
overflow:hidden;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
And my html:
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">3119985815206<span>3119985815206</span></td>
</tr>
<tr>
<td class="hasTooltip">5665811486586<span>5665811486586</span></td>
</tr>
...
</tbody>
</table>
</div>
I'm using jQuery for other things within the same page, but so far haven't been able to come up with a solution with it. If you think the best way to fix this is by using JS or jQuery I'd love to see the result!
Thanks in advance
Change your HTML markup to take more control on overflow:
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
And in your CSS, remove overflow from td:
.ResultsTable th, .ResultsTable td {
border:1px solid black;
/* overflow: hidden; this line should delete */
text-overflow:ellipsis;
}
And new CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 2px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
}
JSFiddle Demo.
Related
I have the following HTML table:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: green;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
What I want to accomplish is that the text in field a ("a very long text that overflows") becomes visible on hover. The table structure should not change.
And indeed it becomes visible, but the text that should be behind it (from field b) partly obscures it. The added span and z-indexes have also no effect. (Tested in Firefox and Chrome)
What I would like is that the text in field a becomes visible and obscures as much of field b as necessary.
Also available in JSFiddle: https://jsfiddle.net/tdn15kh8/7/
Add position: relative; to th that contains overflowing text:
table th {
border: 1px solid black;
z-index: 1;
}
.a {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
background: white;
position: relative;
}
.b {
white-space: nowrap;
}
.a:hover {
overflow: visible;
z-index: 2;
}
.c {
background: lightgreen;
padding-right: .5rem;
}
<table>
<tr>
<th class=a><span class=c>a very long text that overflows</span></th>
<th class=b>some other text that is very long and should only be partly obscured</th>
</tr>
</table>
Check this MDN article to understand stacking context.
For z-index to work, it need a position aswell.
.a:hover {
overflow: visible;
position: relative;
z-index: 2;
}
Fiddle example here
Add position: relative to the .a. The z-index need position:relative or absolute.
There is also data attribute solution, that let you pass text from data attribute to ::after pseudo-class. It looks like this:
table{width: 300px;}
table th{border: 1px solid black;z-index: 1;}
.a{max-width: 100px;overflow: hidden;white-space: nowrap;background: white;}
.b{white-space: nowrap;}
.c{position: relative;}
.a:hover{overflow: visible;}
.a:hover .c::after{content:attr(data-text); display: block;position: absolute; top: 0; left: 0; background: green;}
<table>
<tr>
<th class="a">
<span class="c" data-text="a very long text that overflows">a very long text that overflows</span>
</th>
<th class="b">some other text</th>
</tr>
</table>
I want to be able to change color of any table cell border.
I've decided to not use border-left, border-right, etc, because it's not possible to make it pixel-perfect. Different browsers render it in a different way. Especially in borders intersection area.
I came up with the approach, but it's not working in IE as I expected:
HTML:
<table>
<tr>
<td>
line 1
<div class="left-border"></div>
</td>
<td>
line 1<br>
line 2
</td>
<tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
tr {
vertical-align: top;
}
td {
position: relative;
padding: 5px;
}
.left-border {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
width: 1px;
background-color: #000;
}
JSFIDDLE: http://jsfiddle.net/dv1oqopL/5/
well IE is a B***h as always, it just calculates the height of the td based on it's own content so I have no clean fix for you but a hack that might solve your issue is to add
border-left:1px solid #000;
on that td, this will fill the border underneath your div and look the part an all browsers.
I would like to create a table that consists of several cells in several rows, and when the amount of cells does not fit 100% to the table's size, the main table's border will not show as an exact square, but rather wrap itself around the content.
For example:
<table border = "2px">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
This is the current situation:
This is what I am aiming for:
You can achieve this by including the redundant cells and hiding them with the CSS empty-cells property.
HTML
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
CSS
table td {empty-cells:hide;border:3px double;}
Note the table itself is not given a border, but rather the cells themselves directly. Unfortunately, this will not work in combination with a border-collapse:collapse; declaration.
See jsFiddle demo
Edit
If a second border is required, you can use the double value of the border-style property. Updated the CSS above and the fiddle to reflect this.
It is possible!
Through a heroic personal effort, I have reproduced your graphic using css only from your html.
http://codepen.io/anon/pen/Ekoxl
It works like this:
table {
display: block;
}
tr {
display: block;
float: left;
clear: left;
position: relative;
border-style: solid;
border-width: 3px;
background-color: white;
border-color: #999 #333 #333 #999;
}
tr:nth-child(n+2) {
border-width: 0 3px 3px 3px;
}
tr:nth-child(n+2)::before {
content: "";
display: block;
background-color: #fff;
position: absolute;
width: 100%;
top: -3px;
height:4px;
}
tr:nth-child(n+2)::after {
content: "";
display: block;
background-color: #999;
position: absolute;
width: 3px;
height: 4px;
top: -3px;
left: -3px;
}
td {
display: inline-block;
border: solid #666 1px;
margin: 2px
}
you cannot do that by table but can achieve it via div and css
still i have shown what td with little style can do
please check
<html>
<head>
<style>
td{border:2px solid black;}
</style>
</head>
<body>
<table border = "2px">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="1">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
</body>
</html>
I need to add up-right triangle in a cell.
How to do this?
I tried to add span and icon inside span, but it goes awry
<span style="position: relative;float:right;top:-30px;">#Html.ImageContent("triangle_bonus.png", "")</span>
Using CSS Triangles:
You basically have a 0 height, 0 width element, and use the borders to construct the triangle. Because the line between borders (for example, between top and left) is diagonal, you can create nice looking, solid color triangles with it!
Here's an Example!
HTML:
<table border="1">
<tr>
<td class="note">Triangle!</td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td {
padding: 20px;
}
.note {
position: relative;
}
.note:after { /* Magic Happens Here!!! */
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
} /* </magic> */
Advantages:
No Images! - Meaning, no extra request.
No Additional Markup! - Meaning, you don't litter your HTML with unsemantic markup.
Looks good on all sizes! - Because it renders in the browser, it would look perfect on any size and any resolution.
Disadvantages:
Depends on pseudo-elements - Meaning that lower versions of IE will not display the triangle. If it's critical, you can modify the CSS a bit, and use a <span> in your HTML, instead of relying on :after.
Found this question through Google and ran into issues, so I'll add this here despite the age of original post.
Madara's answer works in most browsers, and works anywhere outside of a table in all browsers. But as mentioned in the comments, the example doesn't work in Firefox.
There's a very old ticket in Bugzilla concerning position:absolute; not working in <td> elements.
The main solution is to add an inner <div>:
HTML:
<table border="1">
<tr>
<td><div class="note">Triangle!</div></td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td .note {
padding: 20px;
}
jsFiddle example
I did find that it was possible to achieve without an inner <div> but only when the <td> was empty, which probably doesn't help.
To do cell text inside div it good idea. but if you just put extra div for ARROW not for text. because it creates problem when td has given width and height and text stays on TOP with padding-top:20px;.
I found another solution and tested on All major browsers (eg: IF and FF as well)
.arrow-right-1 {
position: absolute;
top: -1px;
right: -5px;
float: right;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(45deg);
}
td {
border: solid 1px blue;
width: 160px;
height: 100px;
/* padding: 0px !important; */
/* vertical-align: top; */
position: relative;
}
<table class="table">
<tbody>
<tr>
<td>
<div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text
</td>
</tr>
</tbody>
</table>
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Update
The following code is working for me in IE8, FF3.6 and chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
The example lays here
Little late to the party, but there's a nice solution I just discovered.
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!
Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).
For example
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
background-color: lime;
}
td a {
/* FONT STYLES HERE */
text-decoration: none;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>
Hope this helps!
Following hack works [Tested on Chrome / Firefox / Safari]
Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
Try display: block:
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
I will post the same answer here, as I did on my own question.
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
See my updated fiddle.
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
oops.
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
Maybe not the most elegant solution, but it works well enough for now.
Now if I could only figure out how to do this the right way....
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
This way you cut out the middle man.
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.
Then you can replace <td> with just <a> and style it with display:table-cell.
Work perfectly even on varying heights of <td> contents.
so original html without anchors:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
a:hover
{
background-color:#ccc;
}
<div style="display:table; width:100%">
<div style="display:table-row">
content1<br>another_line
content2
</div>
</div>
I have used this solution: works better then the rest in my case.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
And in HTML: ...