I asked a question earlier about a way of highlighting tables using JavaScript and `CSS. I'm having difficulty ensuring that the borders of the table look ok.
For example, in my table border I have set the margin to be 0. When hovering on a column, the increased border size causes the overall table to "jump" slightly. To prevent this I tried to resize the table cells but this does not make a difference.
I'm illustrating the problem with a JSFiddle here: /. It's a little hard to see in these images but hopefully the fiddle illustrates the issue.
My CSS is the following:
table, td {
background-color: white;
border: 0px solid white;
border-collapse: collapse;
}
When highlighting the column, a border of pixel thickness 2 is chosen. I tried experimenting with changing the cell size using $('td').css({height: '29px'}); (and varying from 26 - 29) but it does not change the effect. The Javascript I am using to highlight is based mainly on an answer to my previous question:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').first().addClass('highlightedTop');
$('td:nth-child(' + t + ')').addClass('highlighted')
$('td:nth-child(' + t + ')').last().removeClass('highlighted').addClass('x');
$('td').css({
height: '39px'
});
if (t > 1) {
var t1 = t - 1;
$('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
$('td:nth-child(' + t1 + ')').last().removeClass('highlightedPrev');
}
}, function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted ');
$('td:nth-child(' + t + ')').first().removeClass('highlightedTop');
$('td:nth-child(' + t + ')').last().removeClass('highlightedBottom');
$('td:nth-child(' + t + ')').last().removeClass('x');
if (t > 1) {
var t1 = t - 1;
$('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
}
});
Is it possible to resize the cells for smoother viewing, or should I be using a different approach? I have experimented with using a white border thickness of 1px but I end up with strange joins at the corners and un-symmetric borders at the extremities.
I asked a question earlier about a way of highlighting tables using JavaScript and `CSS. I'm having difficulty ensuring that the borders of the table look ok.
For example, in my table border I have set the margin to be 0. When hovering on a column, the increased border size causes the overall table to "jump" slightly. To prevent this I tried to resize the table cells but this does not make a difference.
I'm illustrating the problem with a JSFiddle here: http://jsfiddle/grNr8/6/. It's a little hard to see in these images but hopefully the fiddle illustrates the issue.
My CSS is the following:
table, td {
background-color: white;
border: 0px solid white;
border-collapse: collapse;
}
When highlighting the column, a border of pixel thickness 2 is chosen. I tried experimenting with changing the cell size using $('td').css({height: '29px'}); (and varying from 26 - 29) but it does not change the effect. The Javascript I am using to highlight is based mainly on an answer to my previous question:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').first().addClass('highlightedTop');
$('td:nth-child(' + t + ')').addClass('highlighted')
$('td:nth-child(' + t + ')').last().removeClass('highlighted').addClass('x');
$('td').css({
height: '39px'
});
if (t > 1) {
var t1 = t - 1;
$('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
$('td:nth-child(' + t1 + ')').last().removeClass('highlightedPrev');
}
}, function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted ');
$('td:nth-child(' + t + ')').first().removeClass('highlightedTop');
$('td:nth-child(' + t + ')').last().removeClass('highlightedBottom');
$('td:nth-child(' + t + ')').last().removeClass('x');
if (t > 1) {
var t1 = t - 1;
$('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
}
});
Is it possible to resize the cells for smoother viewing, or should I be using a different approach? I have experimented with using a white border thickness of 1px but I end up with strange joins at the corners and un-symmetric borders at the extremities.
-
1
Is using
outlinean option? The down side is that all 4 sides must have a stroke applied to them, but the up side is that it doesn't impact the element's width like border does. – cimmanon Commented Nov 21, 2012 at 21:36 - Yes - it could be (I was not aware of it). Can it be used with a table? – djq Commented Nov 21, 2012 at 21:37
- Works on just about anything. – cimmanon Commented Nov 21, 2012 at 21:45
5 Answers
Reset to default 4If outline doesn't work for you, using a 2px solid transparent border on the default state can also work:
table, td {
background-color: white;
border: 2px solid transparent;
border-collapse: collapse;
}
http://jsfiddle/grNr8/7/
Could you overlay the table cell on hover with a transparent png that looks like a border?
Put a DIV in the TD and style the DIV instead. You can manipulate the size of the DIV to allow for the border, whereas you cannot for a table cell.
If you don't have a border and add a border, things get messed up. Instead if you do have a border and change it's colour, the oute is much better. No jumping, to say the least. If your JSFiddle example represents what you really want to do (that being solid bg-coloured td's), that's what I would do.
.a{background-color: red; border: 2px solid red; }
.b{background-color: green; border: 2px solid green;}
.c{background-color: orange; border: 2px solid orange;}
See full example: http://jsfiddle/grNr8/9/
In my opinion, it is easiest to just always use a border and only change the color. The solution is so simple that I think I missed some details of the question:
fiddle
.a{
background-color: red;
border: 2px solid red;
}
.b{
background-color: green;
border: 2px solid green;
}
.c{
background-color: orange;
border: 2px solid orange;
}