I need to change the color of the data(text) in the table column when mouse is pointed over on that text. I don't need to change the color in first column of the table.
I implemented following code. But it doesn't work properly.
onmouseover="{{$index==0?this.style.color='black':this.style.color='#f06751'}}"
onmouseout="this.style.color='black'"
I am using angualr js.
<td ng-style="myColour" ng-mouseenter="ng-mouseenter="changeColor(index,true)""></td>
Controller.js
$scope.changeColor = function(index,bool) {
if(bool === true) {
$scope.myColour = {color: '#c5c2c2'};
} else if (bool === false) {
$scope.myColour = {color: 'white'}; //or, whatever the original color is
}
You can set the default color for the table and then change the color for the required column by adding class / style
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.changeColor:hover {
color:#f06751;
}
.changeColor {
color: blue;
cursor:pointer;
}
.tab, .tab tr, .tab td, .tab th {
border: 1px solid #000;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<th>SL No</th>
<th>Description</th>
</tr>
<tr>
<td>1</td>
<td class="changeColor">Something</td>
</tr>
</table>
</body>
</html>
Related
I wish to design a table with single row and 2 columns. When I click on the value in cell A1, I want its description to be displayed in A2.For example if A1 contains B,A2 would display Bat,only when I click on B. What is the easiest way to achieve this using HTML coding?
If you are willing to try javascript you can try this out.
// will check the answer closest to clue and show it in the next td
$(".clue").on("click", function(){
// get the answer 'Bat' in this case.
var answer = $(this).closest("tr").find(".answer").attr("data-id");
// put 'Bat' in the next td with the class answer.
$(this).closest("tr").find(".answer").html(answer);
});
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
width: 100px;
}
.clue:hover {
cursor: pointer;
background: #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tr>
<td class="clue">
B
</td>
<td class="answer" data-id="Bat"></td>
</tr>
</table>
If you don't need the click, and hovering is okay, you can do it without JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Hover Test</title>
<meta charset="UTF-8" />
<style>
td+td { font-size: 0; }
td:hover+td { font-size: 1em; transition: 2s; }
</style>
</head>
<body>
<h1>Hover Test</h1>
<table>
<tr> <td>B</td> <td>Bat</td> </tr>
</table>
</body>
</html>
I have this simple html code. I am simply trying to format the colors but none of the CSS is actually formatting it.
I've tried changing the variables names, changing the table class to id and vice-versa.
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child td {
font-size: 30px;
background-color: red;
color: green;
}
#cell-style {
font-size: 8px;
text-align: left;
}
</style>
</head>
<html>
<body>
<table class="cool-table">
<tr>
<th id="cell-style">Fruit</th>
<th id="cell-style">Price</th>
</tr>
<tr>
<th id="cell-style">Apples</th>
<th id="cell-style">$10</th>
</tr>
<tr>
<th id="cell-style">Banana</th>
<th id="cell-style">$50</th>
</tr>
<tr>
<th id="cell-style">Mango</th>
<th id="cell-style">$20</th>
</tr>
</table>
</body>
</html>
It should show the entire table background as blue and the text should be purple. The first row's text should be large with a red background and green text. The rest of the cells should have a blue background with purple text and size 8px font.
Change your header cells to th and the normal cells to td. That way you do not need a id, class or tr:first-child to separate the header row from the rest. Note that if you use id, you should only use it on a single HTML tag. For multiple tags use class instead.
<html>
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table th { /* Changed to th, no need for tr:first-child */
font-size: 30px;
background-color: red;
color: green;
}
.cool-table td { /* Styling td-tags (table cells) */
font-size: 8px;
text-align: left;
}
</style>
</head>
<body>
<table class="cool-table">
<tr>
<th>Fruit</th> <!-- Keep as th -->
<th>Price</th>
</tr>
<tr>
<td>Apples</td> <!-- Changed to td -->
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$50</td>
</tr>
<tr>
<td>Mango</td>
<td>$20</td>
</tr>
</table>
</body>
</html>
You can simply do it this way :
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child {
background-color: red;
color: green !important;
}
.cool-table tr:not(:first-child) {
font-size: 8px;
text-align: left;
}
<table class="cool-table">
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<th>Apples</th>
<th>$10</th>
</tr>
<tr>
<th>Banana</th>
<th>$50</th>
</tr>
<tr>
<th>Mango</th>
<th>$20</th>
</tr>
</table>
The first-child has a red background and green color, and everything that is NOT the first child gets a font-size of 8 and is aligned to the left.
There are several issues to look at.
style tag belongs in head tag which belongs in the html tag.
You can't use multiple ids in the same document - they're supposed to be unique. Try using a class like below.
the second css block doesn't do anything. Maybe you want to remove the td from the selector like below?
Several of your styles are not being applied because they override each other. Try making the selectors more specific to give them higher precedence.
You really want to understand the structure of html documents. You can verify them using the w3 validator
You can also learn more about CSS from Mozilla.
<!doctype html>
<html><head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child { /* removed 'td' */
font-size: 30px;
background-color: red;
color: green;
}
.cell-style { /* changed to class */
font-size: 8px;
text-align: left;
color: yellow;
}
</style>
</head><body>
<table class="cool-table">
<tr>
<th class="cell-style">Fruit</th>
<th class="cell-style">Price</th>
</tr>
<tr>
<th class="cell-style">Apples</th>
<th class="cell-style">$10</th>
</tr>
<tr>
<th class="cell-style">Banana</th>
<th class="cell-style">$50</th>
</tr>
<tr>
<th class="cell-style">Mango</th>
<th class="cell-style">$20</th>
</tr>
</table>
</body>
</html>
I want to provide backgroud color to table cell based on the value this is what so far i have done:
<style type="text/css">
.Scheduled {
background-color: lime;
}
.Completed {
background-color: lawngreen;
}
.Completed with error {
background-color:red ;
}
.Pending {
background-color: #ffbf00 ;
}
</style>
<td class="#item.Status" >
#Html.DisplayFor(modelItem => item.Status)
</td>
i want Complete with error cell to be in Red how can i do it? what i am doing wrong?
expected output:
The spaces in .Completed with error make it an invalid css class name.
If the class name was changed to .Completed-with-error, then it would become valid.
Let's fix this:
<td class="#item.Status.Trim().Replace(' ', '-')" >
#Html.DisplayFor(modelItem => item.Status)
</td>
Now change your CSS as well:
<style type="text/css">
.Scheduled {
background-color: lime;
}
.Completed {
background-color: lawngreen;
}
.Completed-with-error {
background-color:red ;
}
.Pending {
background-color: #ffbf00 ;
}
</style>
Voila!
Updated:
Add .Trim(), to clean up any trailing spaces.
So the first thing that I see is .Completed with error which is not a valid css class. You can't have spaces in a css class.
You'll need to amend the code so the class is .Completed-with-error. Both on the HTML and in the styles.
you may find this useful, notice i dont have border outside table
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #888;
}
td{
color: #fff;
padding: 6px
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.pink{
background-color: pink;
}
<table border="1">
<tr>
<td class="red">fjdfk fdfdf</td>
<td class="green">fjdfk fdfdf</td>
</tr>
<tr>
<td class="blue">fjdfk fdfdf</td>
<td class="pink">fjdfk fdfdf</td>
</tr>
<tr>
<td class="red">fjdfk fdfdf</td>
<td class="green">fjdfk fdfdf</td>
</tr>
</table>
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;
}
I have a table with expand/collapse div elements in td.
When expanding in IE9, all is OK, but in Google Chrome (version 16.0.912.75 m) I get unexpected solid borders on differing spots.
It seems as if the colspan=3 tr's have something to do with this, as the solid borders appear above and under those. Also, the div width values seem to influence this: the behavior changes when choosing other values for these.
See below html. I added 4screen prints: initial view, expand row1, expand row2, expand both.
What is causing this odd behavior and how can I prevent it?
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Example</title>
<style type="text/css">
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
div.QUAL {
margin-left:4pt;
font-size: 90%;
}
input.buttonQUAL {
color: blue;
background: white;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
div.listQUALdesc {
color: black;
background: white;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleMe(a){
var e = document.getElementById(a);
if(!e) return true;
if( e.style.display == "none")
{
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
};
function expandByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "block";
}
}
return true;
}
function collapseByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "none";
}
}
return true;
}
</script>
</head>
<body>
<p/>
<table style='table-layout:fixed word-break:break-all'>
<col width="70"><col width="70"><col width="70">
<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
<tbody>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row1'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row1"/>
</td>
<td>text1
<div id="row1" class="listQUALdesc" style="width:100; display:none">
text2
</div>
</td>
<td></td>
</tr>
<tr>
<td><div class="QUAL">xxx</div></td>
<td>text3</td>
<td></td>
</tr>
<tr>
<td colspan="3">Start</td>
</tr>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row2'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row2"/>
<div id="row2" class="QUAL" style="display:none;width:65">
text5<br/>
</div>
</td>
<td>text4</td>
<td></td>
</tr>
<tr>
<td colspan="3">End</td>
</tr>
</tbody>
</table>
</body>
</html>
See comments - adding < !doctype html > partly solves the issue
Addition
There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.
It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.