title: HTML entire table row as checkbox label
body: <p>I'm working on a table and I am trying to make it so if you click anywhere on a row, including blank spaces, then the corresponding checkbox will be selected. I tried putting a <code>&lt;label&gt;</code> before/after the <code>&lt;tr&gt;</code> tag, but that did not seem to work at all. Next, I tried making the contents of each <code>&lt;td&gt;</code> as a label, which works fine, except if you click the blank space on the row between the text then nothing happens.</p>
  <p>How can I make the entire row selectable?</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>body {margin: 0; background-color: #F2F2F2;}
  
  .topbar {
    z-index: 10;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 56px;
    font-size: x-large;
    background-color: #5B7042;
    border-bottom: 4px solid #3F5328}
  
  #bottombar {
    position: fixed;
    width: 100vw; height: 60px;
    bottom: 0; left: 0;
    padding: 4px;
    box-sizing: border-box;
    border-top: 2px solid darkgray;
    background-color: white;}
  
  
  #list {
    padding: 20px;
    margin-top: 60px;
    margin-bottom: 60px;
    min-height: calc(100vh - 120px);
  }
  
  table {border-spacing: 0}
  
  th{
    padding: 16px;
    color: #5B7042;
    border-bottom: 2px solid #5B7042}
  
  td {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid lightgray;}
  
  td:not(.name) {text-align: center}
  
  tbody tr:hover{
    transform: scale(1.01);
    background-color: #E3E3E3}
  
  .pic{
    display: inline-block;
    width: 25px;
    clip-path: circle();
    margin-right: 10px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel='stylesheet' href='https://classcolonies.com/resources/style.css'&gt;
  
  &lt;div class='topbar'&gt;&lt;/div&gt;
  
  &lt;form id='list'&gt;
    &lt;table&gt;
      &lt;colgroup&gt;
        &lt;col width='1%'&gt;
        &lt;col width='6%'&gt;
        &lt;col width='3%'&gt;
        &lt;col width='3%'&gt;
        &lt;col width='3%'&gt;
        &lt;col width='3%'&gt;
        &lt;col width='3%'&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;input type='checkbox'&gt;&lt;/th&gt;
          &lt;th&gt;Student&lt;/th&gt;
          &lt;th&gt;Seen&lt;/th&gt;
          &lt;th&gt;Lvl&lt;/th&gt;
          &lt;th&gt;Pay&lt;/th&gt;
          &lt;th&gt;Money&lt;/th&gt;
          &lt;th&gt;Streak&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type='checkbox' id='1'&gt;&lt;/td&gt;
          &lt;td class='name'&gt;
            &lt;label for="1"&gt;
              &lt;img class='pic' src='https://mrdansby.com/resources/pics/1.png'&gt;
              &lt;span&gt;John Doe&lt;/span&gt;
            &lt;/label&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;label for="1"&gt;1d ago&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="1"&gt;15&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="1"&gt;$10/hr&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="1"&gt;$1300&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="1"&gt;32&lt;/label&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type='checkbox' id='2'&gt;&lt;/td&gt;
          &lt;td class='name'&gt;
            &lt;label for="2"&gt;
              &lt;img class='pic' src='https://mrdansby.com/resources/pics/1.png'&gt;
              &lt;span&gt;Jane Doe&lt;/span&gt;
            &lt;/label&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;label for="2"&gt;3m ago&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="2"&gt;21&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="2"&gt;$11/hr&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="2"&gt;$2560&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label for="2"&gt;15&lt;/label&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;div id='bottombar'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>