I am doing a webapp and I have a table which is generated by wicket ListView.
What the app does is that when the mouse hovers over a cell, the app will populate an info panel via ajax and what I want is to change cell border so that the user can know which cell the information is related to.
currently I have the following code in css. (scroll-content-item is the class of the table)
scroll-content-item td:hover{
border-style:outset;
border-width:5px;
border-color:#0000ff;}
This does give the border on hover but as soon as the user move the mouse outside the cell the border is gone. What I want is a way to make the border stay as long as the mouse doesn't move to another cell. Is there any way to make the border stay until the mouse is moved onto another cell? I appreciate any suggestions.
Can't do it with CSS. You can use JS though. Here's an example using jQuery.
$("td").hover(function() {
$("td").removeClass('highlight');
$(this).addClass('highlight');
});
DEMO
This is my final solution:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.highlight{
border-style:outset;
border-width:3px;
border-color:#0000ff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("td").hover(function(){
$("td").removeClass('highlight');
$(this).addClass('highlight');
});
});
</script>
</head>
<body>
<table class="waypointsTable" border="1">
<tbody>
<tr>
<td>some text</td>
<td>some text</td>
<td>some text</td>
<td>some text</td>
</tr>
</tbody>
</table>
</body>
</html>
table {
border-collapse: collapse;
}
td {
border-top: 1px solid black;
border-left: 1px solid black;
border-right: none;
border-bottom: none;
}
tr td:last-child {
border-right: 1px solid black;
}
tr:last-child td {
border-bottom: 1px solid black;
}
td:hover {
border: 1px solid red !important;
}
Related
I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.
For the table, I'm using the following CSS code:
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.
I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.
Thanks for your help!
border-collapse: collapse; is a culprit here.
It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.
Look at this interactive example in MDN to see exactly what happens
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This appears to be tricky to implement without JavaScript.
This is a solution using jQuery:
$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
If you want to use CSS and HTML only, you can use such not the best but working solution.
CSS-file:
.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}
HTML-file:
<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>
I have a div with table inside. Div should be scrollable in case if table gets large.
I try to make something like an active row in a table. If user clicks on a row, the row gets outlined.
The problem is that for the first row of the table the top edge of outline is not shown, and for the other rows the left edge of the outline is not shown.
Why does this happen and how to overcome it?
$('tr').click(function(){
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline{
outline: 1px solid red;
}
table {
border: 1px solid #dfdfdf;
border-collapse: collapse;
}
td {
border-bottom: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="">
<tr class="row-outline">
<td>1.1</td><td>1.2</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td>
</tr>
<tr >
<td>3.1</td><td>3.2</td>
</tr>
</table>
</div>
Instead of outline try border. Check below update.
$('tr').click(function() {
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="border: 1px solid black; border-collapse: collapse;">
<tr class="row-outline">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</div>
The problem lies withing border-collapse
if you remove this tag the "row" gets its border properly but on the other hand the "table" border is still displayed at top and bottom so this might not be a very confincing solution
if you on the other hand simulate the table with divs you could deal with it more easily i guess:
Read more about it here:
How create table only using <div> tag and Css
I have an HTML table that needs its border color changed. I can't figure it out.
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Conditions</th>
<th>Characteristics</th>
</tr>
</thead>
<tbody>
<tr class="zebra-stripe">
<td class="first-field">Element</td>
<td>version}</td>
<td></td>
</tr>
<tr>
<td class="first-field">ApplicationTransactionID</td>
<td>string, up to 64 chars, Optional</td>
<td>A number assigned by the calling application to uniquely identify this request.</td>
</tr>
</tbody>
</table>
CSS
/* Global CSS */
table {
border-color: red;
}
tr {
border-color: red;
}
td {
border-color: red;
/* Table CSS */
.zebra-stripe {
border-color: red;
background: #002D38;
border: solid;
border-width: 1px;
}
.zebra-stripe table {
border-color: red;
}
.zebra-stripe tr {
border-color: red;
}
.zebra-stripe td {
border-color: red;
}
I have even tried to change the border color with an inline style. Still no luck! It doesn't work in Chrome or Safari. The border is simply just gray and its from the user agent style sheet. Am I wrongly targeting it? I targeted it like 10 different ways. The class CSS should be enough. I can change the border style or the border width just fine, but I can't change the color. But at the most, targeting the table row should be enough as well.
Cannot fathom what is going wrong.
you haven't defined the rest of the border attributes. You can use:
table {
border: 1px solid red;
}
(which is border-width, border-style and border-color)
instead of
table {
border-color: red;
}
FIDDLE
Also a note about your current CSS, you have .zebra-stripe added as a class to a tr but the CSS states .zebra-stripe table and .zebra-stripe tr which means it's targeting a table or tr inside of a parent with a class of .zebra-stripe
UPDATE
To explain, there were 2 issues, 1 being you forgot to close this
tr {
border-color: red;
}
td {
border-color: red;
<------ //no '}' tag
this prevented .zebra-stripe from working at all. Secondly, .zebra-stripe had the following issue:
.zebra-stripe
border-color: red;
background: #002D38;
border: solid; <------ this should be 'border-style', 'border' is overwriting the others
border-width: 1px;
Wow many careless mistakes on my part. Was pretty flustered, doing a lot of poking around in the dark to see if something would work.
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Conditions</th>
<th>Characteristics</th>
</tr>
</thead>
<tbody>
<tr class="row-edge">
<td class="first-field">Element</td>
<td>version}</td>
<td></td>
</tr>
<tr>
<td class="first-field">ApplicationTransactionID</td>
<td>string, up to 64 chars, Optional</td>
<td>A number assigned by the calling application to uniquely identify this request.</td>
</tr>
</tbody>
</table>
CSS
.row-edge {
border-top: 1px solid #0A454F;
border-bottom: 1px solid #0A454F;
}
Changed a few colors and labels. But this is just what I needed.
Thanks again!
I've made a table with border collapse applied to it. This is standard in the css for all of our tables.
My new table requires a small section beside the row header to be a color. Because the td tag has padding on it, a div doesn't stretch the full distance. Same problem would apply to adding a new table cell to contain only the colored bit.
The idea was that adding a border would solve the problem, and it would work, except for the border-collapse. So the problem is demonstrated here http://jsfiddle.net/dtv6P/ where you can see the left border specifically applied to the one cell, is outside the visible bounds of the table. I've tried to apply "border-collapse: separate" to the cell but that doesn't seem to work, so any ideas?
edit* the color is selected from an array based on the line of data
basic idea code (not my actual code)
<head>
<style>
td {
border: 2px solid black;
padding: 4px;
}
table {
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td style="border-left: 10px solid;">1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
I found this link http://www.w3schools.com/cssref/pr_border-collapse.asp and found it to be helpful.
<head>
<style>
table {
border-collapse: collapse
}
table, td {
border: 2px solid black;
padding: 4px;
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
Here's something that works... but you need to know the height of your contents... it's not very convenient, but works.
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td><div class="withColor"></div>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
with your css
td {
border: 2px solid black;
padding: 4px;
height:20px;
}
td div.withColor {
position:absolute;
margin:-4px 0 0 -4px;
border-left:4px solid red;
height:28px;
}
How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)
UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.
Here is my code I'm working with and a jsfiddle.net page for your convience ;)
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:
http://jsfiddle.net/ptriek/uJ5zN/2/
At this point, #ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.
Fiddle: http://jsfiddle.net/uJ5zN/4/
HTML
<div class="wrapper">
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
</div>
CSS
.wrapper
{
border: 4px solid #000;
width: 400px;
}
table {
width: 400px;
}
table tr{
border-bottom: 4px solid #CCC;
}
One way would be to use the CSS last-child selector as follows:
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
table tr:last-child {
border-bottom: 4px solid #000;
}