Question posted in 
I want entire column to be highlighted when user clicks on any cell of particular column. Currently ,color changes only of 1 cell which is selected.Purpose is to highlight the services offered in that particular package. Please check the code and let me know how to resolve it.
<html>
<head>
<title>Digital Marketing Packages</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Digital Marketing Packages" />
<meta name="keywords" content="table, css3, style, beautiful, fancy, css"/>
<link rel="stylesheet" href="table1style.css" type="text/css" media="screen"/>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
background: #f0f0f0;
}
#content{
background-color:#fff;
width:750px;
padding:40px;
margin:0 auto;
border-left:30px solid #1D81B6;
border-right:1px solid #ddd;
-moz-box-shadow:0px 0px 16px #aaa;
}
.head{
font-family:Helvetica,Arial,Verdana;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
font-style:normal;
letter-spacing:3px;
color:#888;
border-bottom:3px solid #f0f0f0;
padding-bottom:10px;
margin-bottom:10px;
}
.head a{
color:#1D81B6;
text-decoration:none;
float:right;
text-shadow:1px 1px 1px #888;
}
.head a:hover{
color:#f0f0f0;
}
#content h1{
font-family:"Trebuchet MS",sans-serif;
color:#1D81B6;
font-weight:normal;
font-style:normal;
font-size:56px;
text-shadow:1px 1px 1px #aaa;
}
#content h2{
font-family:"Trebuchet MS",sans-serif;
font-size:34px;
font-style:normal;
background-color:#f0f0f0;
margin:40px 0px 30px -40px;
padding:0px 40px;
clear:both;
float:left;
width:100%;
color:#aaa;
text-shadow:1px 1px 1px #fff;
}
</style>
<body>
<div id="content">
<a class="back" href=""></a>
<span class="scroll"></span>
<p class="head">
<a href="http://emsolutions.co.in/">Back to Excellentia Market Solutions</a>
</p>
<h1>Digital Marketing Packages</h1>
<table>
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter" class="hovercss">Starter $250</th>
<th scope="col" abbr="Deluxe" class="hovercss">Basic $500</th>
<th scope="col" abbr="Medium" class="hovercss">Medium $750</th>
<th scope="col" abbr="Business" class="hovercss">Business $1000</th>
<th scope="col" abbr="Platinum" class="hovercss">Platinum $1250</th>
</tr>
</thead>
<!--
<tr>
<th scope="row">Price Details</th>
<td>$250</td>
<td>$500</td>
<td>$750</td>
<td>$1000</td>
<td>$1250</td>
</tr>-->
<tbody>
<tr>
<th class="addcss">Initial Analysis</th>
</tr>
<tr>
<th scope="row">Critical Website Analysis</th>
<td class="hovercss"><span class="check"></span></td>
<td class="hovercss"><span class="check"></span></td>
<td class="hovercss"><span class="check"></span></td>
<td class="hovercss"><span class="check"></span></td>
<td class="hovercss"><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Back Link Analysis</th>
<td class="hovercss"><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Competitor Analysis</th>
<td class="hovercss">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<th scope="row">Keyword/Phrase Analysis</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Baseline Ranking check</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Google Penalty Check</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th class="addcss">SEO On-Page Optimization</th>
</tr>
<tr>
<th scope="row">Keyword Research</th>
<td>10</td>
<td>25</td>
<td>40</td>
<td>55</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Title Tag and Meta Description Optimization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Internal and External Link Optimization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Duplicate Content Check</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Image Alt Tag Optimization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">H1 Tag Optimization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Robots.txt</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Canonicalization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Site Content Optimization</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th class="addcss">SEO Off-Page Optimization</th>
</tr>
<tr>
<th scope="row">Directory Submission</th>
<td>10</td>
<td>50</td>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<th scope="row">Social Bookmarking</th>
<td>20</td>
<td>40</td>
<td>80</td>
<td>120</td>
<td>160</td>
</tr>
<tr>
<th scope="row">Articles / Press Release Writing and Submissions</th>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
</tr>
<tr>
<th scope="row">Video Promotion</th>
<td>-</td>
<td>3</td>
<td>5</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<th scope="row">Blog Setup</th>
<td>1</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<th scope="row">Business Reviews</th>
<td>-</td>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
</tr>
<tr>
<th scope="row">Classified Ads</th>
<td>-</td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>50</td>
</tr>
<tr>
<th class="addcss">Social Promotions</th>
</tr>
<tr>
<th scope="row">Facebook</th>
<td>-</td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Twitter</th>
<td>-</td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Google+</th>
<td>-</td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Pinterest</th>
<td>-</td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">LinkedIn</th>
<td>-</td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<th class="addcss">Online Reputation Management Reports</th>
</tr>
<tr>
<th scope="row">Service for Negative Reviews Submission</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Monthly Accomplishment Reports</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS Code :-
/* Table 1 Style */
table{
font-family: "Times New Roman", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
}
thead th{
padding:15px;
color:#fff;
width: 550px;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
thead th:empty{
background:transparent;
border:none;
position:sticky;
}
/*---------*/
table {
overflow: hidden;
}
tr, th, td:hover {
background-color: white;
}
td, th {
position: relative;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
/*--nxt code--*/
.addcss{
color: #9DD929;
padding: 10px;
font-family: "Times New Roman;
font-size: 24px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(255,255,255)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(255,255,255) 2%,
rgb(255,255,255) 51%,
rgb(255,255,255) 87%
);
}
tbody th{
color:#fff;
text-shadow:1px 1px 1px #568F23;
background-color:#9DD929;
border:1px solid #93CE37;
border-right:3px solid #9ED929;
padding:0px 10px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(158,217,41)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
width: 3000px;
}
tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;
}
tfoot th{
color:#666;
}
tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
tbody span.check::before{
content : url(../images/check0.png)
}
/*------------------------*/
2
Answers
I’m not sure if this is exactly what you’re looking for, but you could give everything in each column the same id. So for example:
Just make sure that everything under “Starter” in the table also has the id of 1 and so on. Then, you can do something like this in an onClick() method which would require some JavaScript:
OR
and for completion purposes the class would be something like:
So now you’d be changing the style of everything with id=1, which should be the whole column. You would also probably need to handle removing the class as well once a different column is clicked.
I’m not also sure if I understood your need correctly but I have a suggestion where you can see it in action here : https://codepen.io/FaridNaderi/pen/rwooxr
Note: Please click on column headers.
It actually uses a div behind the table, and then on each TH clicks, it adjust width and left CSS properties of the highlighter DIV based on the TH size and left offset position.
I also used jQuery to make it easier to read and understand, if you need Native JavaScript please let me know
Hope it helps.