title: How do I make an entire row of a table clickable in css?
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="hoverTable" style="width: 700px;"&gt;
    &lt;tbody&gt;
      &lt;tr class="clickable-row" data-href="mathdept.ucr.edu"&gt;
        &lt;td colspan="3"&gt;&lt;strong&gt;&lt;a&gt;CENTER FOR MATHEMATICAL &amp;amp; COMPUTATIONAL MODELING IN BIOLOGY &amp;amp; MEDICINE&lt;span style="float: right;"&gt;►►&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="3"&gt;&lt;strong&gt;OUR PEOPLE - COMMITTEES &lt;span style="float: right;"&gt;►►&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="3"&gt;&lt;strong&gt;SEMINARS, COLLOQUIUM, CONFERENCES &amp;amp; RESEARCH &lt;span style="float: right;"&gt;►►&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>