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>
Related
I'm trying to create a table containing a list of products. I want each row to only have one cell, with the name of a product left-aligned on it. But I also want to add an edit option(a hyperlink called 'Edit'), right-aligned on the same line, in the same table cell. Since <td> elements are left-aligned by default, I added a class attribute to Edit's <a> tags and used that to style it, but it's still left-aligned. Any idea how to solve this?
This is the CSS code for the edit option's class:
.editLink{
text-align: right;
text-decoration: none;
color: #555555;
font-size: smaller;
padding-right: 10px;
}
You can use float on the edit link.
table {
border-collapse: collapse;
}
table td {
border: 1px solid #000;
width: 150px;
}
.editLink {
float: right;
text-decoration: none;
color: #555555;
font-size: smaller;
padding-right: 10px;
}
.editLink::after {
clear: both;
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table>
<tr>
<td>Lorem Edit</td>
</tr>
<tr>
<td>Lorem Edit</td>
</tr>
<tr>
<td>Lorem Edit</td>
</tr>
</table>
</body>
</html>
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>
I am trying to give a left border to a table cell. It works fine in Chrome, but in Firefox and IE the border isn't displayed.
I saw in the documentation that left and right borders aren't widely supported but maybe there is a workaround or am I doing something wrong in the code.
The strange thing is that I have rounded borders in my table which have both left-borders and bottom borders and they are shown fine on each browser.
Here's the relevant code:
<tr class="Panel_Middle_Row">
<td class="Panel_Middle_Left_Cell" width="20"></td>
<td class="Panel_Middle_Middle_Cell">blablabla</td>
<td class="Panel_Middle_Right_Cell"></td>
</tr>
And the according css:
.Panel_Middle_Left_Cell {
width: 20px;
border-left-style:solid;
border-left-color:#CCC;
border-left-width:2px;
}
.Panel_Middle_Right_Cell {
width: 20px;
border-right-style:solid;
border-right-color:#CCC;
border-right-width:2px;*/
}
You can find an example here.
Your td are empty, ence they are not displayed. Add a .
Or add this to your table class : empty-cells: show;
try this:
<!DOCTYPE html>
<html>
<head>
<style>
td.Panel_Middle_Left_Cell {
width: 20px;
border-left-style:solid;
border-left-color:#CCC;
border-left-width:2px;
}
td.Panel_Middle_Right_Cell {
width: 20px;
border-right-style:solid;
border-right-color:#CCC;
border-right-width:2px;
}
</style>
</head>
<body>
<table>
<tr class="Panel_Middle_Row">
<td class="Panel_Middle_Left_Cell">jcjgcjgc</td>
<td class="Panel_Middle_Middle_Cell">blablabla</td>
<td class="Panel_Middle_Right_Cell"></td>
</tr>
</table>
</body>
</html>
My wish is simple - to make a clickable cell (i.e. cell with a link) with a minimum height requirement (40 px in this case) ant vertically centered text. Here's what I come up with so far:
<html>
<head>
<style>
table.test td {
border:1px solid black;
width: 200px;
height: 100%;}
table.test td.cell a {
background-color: #FFF5EE;
display:inline-block;
height:100%; width:100%;
min-height: 40px;}
table.test td.cell a:hover, td.cell a:active {
background-color: #D2691E;}
</style>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
</html>
Everything's ok, but I can't get the text aligned (centered) vertically :/ The vertical-align property doesn't work in this case.
Here's the example in action (link).
Remove the line
height: 100%;
from
table.test td.cell a { ... }
and add
vertical-align: middle;
to
table.test td { ... }
use vertical-align:
http://jsfiddle.net/pN4pQ/1/
Try This ::
.cell {
line-height: 4em;
}
and for horizontal alignment
.cell {
line-height: 4em;
text-align: center;
}
http://jsfiddle.net/HA6Wq/1/
Ok i made a lot of modification and included jquery but i think it's what you want
So here we go :
<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>
table.test td
{border:1px solid black;
width: 200px;
height: 40px;}
.cell
{background-color: #FFF5EE;
cursor:pointer;}
.hover
{background-color: #D2691E;}
</style>
<script>
$(document).ready(function() {
//Replace your link and redirect when you click on the cell
$(".cell").click(function() { window.location = 'http:\www.google.lt'});
//Since you can't put a hover class on a td, you have to do it in jquery
$(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});
});
</script>
</head>
<body>
<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
And I've put the min-height as a height in the td style
I know it's a lot of change but it's working :)
And here is the fiddle : http://jsfiddle.net/d9CGX/
EDIT :
I've updated the fiddle : http://jsfiddle.net/d9CGX/2/ So you can have multiple link
Try the following css to center and vertically align the text:
table.test td {
text-align:center;
vertical-align:middle
}
just if it helps I did this and switched the link to a javascript onclick:
.tdmenu
{
vertical-align : middle;
padding-left : 10px;
padding-right : 10px;
}
.tdmenu:hover
{
background-color : rgb(220,220,220); /*set color to whatever you like*/
cursor : pointer;
}
And my HTML
<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
<td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
<td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>
Seems to play nice.
I was involved with a similar situation and it took many hours to figure out. This method will allow you to vertically align and center. Replace your
code with this.
<div style="display:table;width:100%;height:100%;">
<a href="http://www.linkhere.com" style="display:table-row;">
<div style="display:table-cell;vertical-align:middle;align-text:center;">
Link contents go here
</div>
</a>
</div>
Put the contents of the link inside the div table-cell of course. This will stretch the link also to the edges of the container your using for this code. Hope that helps.
I have a HTML table where I must set the overall width and want to make sure the label column doesn't get too wide.
It works as expected in Firefox 4, but IE 9 seems to completely ignore the with property.
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>
Add <!DOCTYPE html> as the very first line to get Standards Mode (not directly related to your problem, but you should definitely do it unless you like IE9 pretending to be IE5 - Quirks Mode).
Set the overall width of the table on table instead of th.caption.
See: http://jsbin.com/icafo3
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
table { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>