如何通过单击其容器来选择单选按钮

Question

我正在使用Rails 4.2和bootstrap开发一个Web应用程序。

在用户从其播放列表中选择视频的表单中，我尝试按以下格式输出用户的视频：

<div class="form-group select_video">

   <h3>Select Playlist Video</h3>

   <table class="table">    

   <% @user.playlist_videos.each do |playlist_video| %>

      <label for="playlist_video_<%= playlist_video.id %>">

          <tr class="study_video_instance">
              <td><%= radio_button_tag "playlist_video", "#{playlist_video.id}" %></td>
              <td><%= Topic.find(Video.find(playlist_video.video_id).topic_id).name %></td>
              <td><%= full_name_of(Speaker.find(Video.find(playlist_video.video_id).speaker_id)) %></td>
          </tr>

      </label>

    <% end %>
    </table>
</div>

我希望用户能够通过点击<tr>标记内的<label>标记来选择视频。

但是，我的浏览器呈现以下内容：

<div class="form-group select_video">
<h3>Select Playlist Video</h3>

    <label for="playlist_video_18"></label>
    <label for="playlist_video_24"></label>
    <label for="playlist_video_25"></label>
    <label for="playlist_video_26"></label>

<table class="table">...</table>
</div>

问题

在浏览器中渲染时，我的所有标签都会折叠并显示在桌子上方。

请帮助我理解我所缺少的内容。