title: Table row with empty cells does not display border
body: <p>I have a table that is dynamically populated with data. This is in ASP.Net MVC.</p>
  
  <p>The table contains 3 <code>&lt;tbody&gt;</code> elements which have data appended to it, then I have some jQuery in a script tag add the final borders to the tbody elements.  Each tbody element has 2 rows in it, the first row is completely empty, used to space out the tobdy elements from each other, and then the second row has a checkbox in one cell and some text next to it.</p>
  
  <p>The table is 4 columns wide, and the 2nd row has the 2 right most cells empty. I am trying to add a border around the <code>&lt;tbody&gt;</code> by adding borders to the rows. I experimented with other methods I searched online but this was the closest I am able to get.</p>
  
  <p>Basically, my table looks like this (the borders on the side are continuous)</p>
  
  <pre><code>_________________________________________________________
  |                                                                     |
  
  |                                                                     |
  
  |_____________________________________________________________________|
  </code></pre>
  
  <p>Each row will have the let and right border on it and the last row will have the left, right and bottom border on it. The top row will have the left, right and top border but the right border does not show.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;table id="workbookTable_@wb.WorkBookId" cellpadding="20" style="border-collapse: collapse"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;input type="checkbox" id="@wb.WorkBookId _SelectAllCheckbox"/&gt;&lt;/th&gt;&lt;th&gt;Timepoint&lt;/th&gt;&lt;th&gt;Information&lt;/th&gt;&lt;th&gt;Notifications/Errors&lt;/th&gt;&lt;th&gt;Preview&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="@wb.WorkBookId _ErrorVisits"&gt;
          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"&gt;&lt;td&gt;&lt;input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Visits in Error&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="border-right: 2px solid black"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody id="@wb.WorkBookId _NotPreviouslySQCvisits"&gt;
          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"&gt;&lt;td&gt;&lt;input type="checkbox" id="@wb.WorkBookId _NotSQCCheckbox"/&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;First Time Visits&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="border-right: 2px solid black"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody id="@wb.WorkBookId _PreSQCvisits"&gt;
          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"&gt;&lt;td&gt;&lt;input type="checkbox" id="@wb.WorkBookId _PreSQCCheckbox"/&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Previously Visits&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="border-right: 2px solid black"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
          &lt;!-- Loop through each visit collection to place each SQC ready visit in the desired location --&gt;
          @{
              // Razor code to dynamically add rows to tbody elements
  
              &lt;script type="text/javascript"&gt;
                  if ($("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(2)").children().length &lt; 3) {
                      //$("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(2)").remove();
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(2)").hide();
                  } else {
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(2) &gt; tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                  }
  
                  if ($("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(3)").children().length &lt; 3) {
                      //$("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(3)").remove();
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(3)").hide();
                  } else {
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(3) &gt; tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                  }
  
                  if ($("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(4)").children().length &lt; 3) {
                      //$("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(4)").remove();
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(4)").hide();
                  } else {
                      $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(4)  &gt; tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                  }
  
                  $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(2) &gt; tr:last").css({ "border-bottom": "2px solid black" });
                  $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(3) &gt; tr:last").css({ "border-bottom": "2px solid black" });
                  $("#workbookTable_@wb.WorkBookId &gt; tbody:nth-child(4) &gt; tr:last").css({ "border-bottom": "2px solid black" });
              &lt;/script&gt;
          }
  &lt;/table&gt;
  </code></pre>
  
  <p>How can I get the border to show up?</p>
  
  <p>If more details are needed let me know.</p>
  
  <p>I tested it in both IE9 and chrome and they both show the same thing.</p>