How do I make an entire row of a table clickable in css?

Question

If I have the following code what would I add to make a row clickable as a link? (be gentle I am new to this) I have tried a couple of things, but I am very new to this so I am struggling to get it right:

.hoverTable {
  width: 700px;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #315795 1px solid;
  font-family: "tradegothic";
  font-size: 14px;
  color: #315795;
}


/* Define the default color for all the table rows */
.hoverTable tr {
  background: #bec7d6;
}


/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
  background-color: #315795;
  color: #ffffff;
}


/* Define the hover highlight color for the table row */
.hoverTable td:hover {
  background-color: #315795;
  color: #ffffff;
}

<table class="hoverTable" style="width: 700px;">
  <tbody>
    <tr class="clickable-row" data-href="mathdept.ucr.edu">
      <td colspan="3"><strong><a>CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td>
    </tr>
    <tr>
      <td colspan="3"><strong>OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></strong></td>
    </tr>
    <tr>
      <td colspan="3"><strong>SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></strong></td>
    </tr>
  </tbody>
</table>

What do you mean by "clickable"? Do you want the user to click a row and cause navigation to occur? — mrogers, Jun 16 '17 at 21:09
I see you have a data attribute on the row with a relative URL. You would need to use Javascript/jQuery to get this to work. — WizardCoder, Jun 16 '17 at 21:17

score 0 · Answer 1 · edited Mar 09 '18 at 11:10

if I understood correctly you need to create something like in the picture that I uploade:

In order to create that you need to put the href="information" inside of tag :

enter code here

<tr class="clickable-row">
<td colspan="3"><strong><a href="/mathdept.ucr.edu">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td>
</tr>

score 0 · Accepted Answer · answered Jun 18 '17 at 16:21

HTML has two basic types of elements, inline elements and block elements. If you want to know more about it, just read here.

Because them <a> tag belongs to the class of the inline elements, it won't fill the whole table cell. The trick is to convert the anker tag with the link to a block element:

a {
  display: block;
}

Now the anker will fill the complete cell. Below you will find a code example on how this solution works.

I have two extra advices for you as beginner:

Use of Non-Standard Fonts

Please take care, if you are using unusual fonts like tradegothic, which are not installed an all computers. If a visitor of a website does not have this font installed on his machine, he will see your website in the default font of his web browser.

If you want to use a custom font, please read here.

Do not use tables if not necessary

Using a table to display a navigation or other non-table data is mostly considered as a bad style of code.

Below you will find the exakt same looking navigation box without using an html table. This code could be considered to be more clean.

.nav {
  width: 700px; /* Define the width of the navigation box */
  padding: 0;
}

.nav li {
  list-style-type: none;
  margin: -1px 0 0 0;
}

/* Define the style of the ankers */
.nav a,
.nav a:visited {
  display: block;
  border: #315795 1px solid;
  padding: 7px;
  
  font-family: "tradegothic";
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #315795;
  background: #bec7d6;
}

/* Define the hover style for the ankers */
.nav a:hover {
  background-color: #315795;
  color: #ffffff;
}

/* Define the Arrows */
.nav a::after {
  content: "►►";
  float: right;
}

<ul class="nav">
  <li><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE</a></li>
  <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li>
  <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH</a></li>
</ul>

Original Solution with Table

If you, for whatever reasons, prefer the table solution, here you will find the fixed code.

.hoverTable {
  width: 700px;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 0;
  border: #315795 1px solid;
}

/* Define the style for normal and visited links */
.hoverTable a,
.hoverTable a:visited {
  display: block;
  padding: 7px;
  
  text-decoration: none;
  font-weight: bold;
  font-family: "tradegothic";
  font-size: 14px;
  color: #315795;
  background: #bec7d6;
}

/* Define the hover style for the links */
.hoverTable a:hover {
  color: #ffffff;
  background: #315795;
}

<table class="hoverTable">
  <tbody>
    <tr class="clickable-row" data-href="mathdept.ucr.edu">
      <td colspan="3"><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp;  COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a></td>
    </tr>
    <tr>
      <td colspan="3"><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></a></td>
    </tr>
    <tr>
      <td colspan="3"><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></a></td>
    </tr>
  </tbody>
</table>

Thank you so much. Very helpful. No tables. – WTH Jun 19 '17 at 17:40 — WTH, Jun 19 '17 at 17:40

How do I make an entire row of a table clickable in css?

2 Answers2