HTML Table Mouse Hover to last Marge Column - html

enter image description hereI have a table with mouse hover effect, where last column is merged. Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
{
background-color: #ffff99;
}
</style>
<body style="text-align:center">
<h1 style="color:green;">
Mouse Hover
</h1>
<h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td>Gloria Jean's Coffees</td>
<td>Coffee</td>
<td rowspan="3" class="highlight" data-cell="c5">Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
</tr>
</table>
</body>
</html>
`
When I hover a particular row, hover effect works properly. But when I hover to the last merged column, hover effect work for 1st row also.
I want that, when I hover to the last merged column, hover effect only work on that particular merged column, not 1st row.


as per comment, here i use small jquery code also,
use hover function of jquery and other row use css hover with css :not property.
try like below,
$(document).ready(function(){
$('.nothighlight').hover(
function () {
$('.nothighlight').css('background','#ffff99');
},
function () {
$('.nothighlight').css('background','#ffffff');
}
);
});
table,th,td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
background-color: #ffff99;
}
.highlight:hover
{
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="text-align:center">
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td class="nothighlight">Gloria Jean's Coffees</td>
<td class="nothighlight">Coffee</td>
<td rowspan="3" class="highlight" >Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
<td style="display: none;"></td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
<td style="display: none;"></td>
</tr>
</table>
</body>

Related

Cannot add borders to the sections CSS

I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?

Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.

First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }

CSS styling: tables with inside tables (borders and backgrounds)

Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP

Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

How to add text into rowspan in the middle of the table

Can someone please tell me how, to insert data in a row? I just want to write something in these 2 rows:
The red + are the cells in which i want to insert text. I tried many things but it always ended up
building a new line. I would appreciate help :)
My html code:
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan Attribute</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body style = "text-align:center">
<table>
<tr>
<td>Ajay</td>
<TD ROWSPAN="3">Bild1</TD>
<TD>Bananas</TD>
<TD ROWSPAN="3">Bild2</TD>
</tr>
<tr>
<td>Priya1</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
</body>
</html>

You need to add data in second and third row, so you need to enter those data in second and third <tr> itself.
Here it is
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
<table>
<tr>
<td>Ajay</td>
<td ROWSPAN="3">Bild1</td>
<td>Bananas</td>
<td ROWSPAN="3">Bild2</td>
</tr>
<tr>
<td>Priya1</td>
<td>Bananas</td>
</tr>
<tr>
<td>Priya</td>
<td>Bananas</td>
</tr>
</table>

How to border every cell in a table?

I have a simple table. I want a 1px solid black border around every cell. For some reason I am only getting a border outlining the entire table. I tried adding border-collapse: separate; to the table style, which I thought was the default, but that didn't work either.
Am I doing something wrong? How do I border every cell?
What I have now is this:
<table style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>

You need to apply border to cells (TD) instead of table
TD,TH {
border:1px solid black;
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table style="font-family:Arial; font-size:12px;">
<tr>
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr>
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>

In your css try:
th, td { border: 1px solid black; }

Safest way is giving your table a class. This way it won't affect any other tables in your page.
.my-table-border th,
.my-table-border td {
border: 1px solid black
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table class="my-table-border" style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>
The table class is my-table-border and the selector is only picking tds and ths inside of tables that have this class.

CSS styles does not get applied

I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>

You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity

One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific

In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>

Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>

As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>

<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}

/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.