title: First-child selector within table
body: <p>I have created a page which is a login portal to three separate websites. On this page, I have displayed the three login portals to said websites. I am trying to style it all with css and as few classes as possible (I need to fine tune my css skills).</p>
  
  <p>What I have created is a table with three rows and two columns called loginPortals:</p>
  
  <pre><code>&lt;table class="loginPortals"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Picture 1&lt;/td&gt;
              &lt;td&gt;Login form 1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Picture 2&lt;/td&gt;
              &lt;td&gt;Login form 2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Picture 3&lt;/td&gt;
              &lt;td&gt;Login form 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I've only just begun the styling of the table, so it's very incomplete, however I'm struggling already. This is simplified, because I don't know exactly how it's going to look. Basically though, I want a border of some sort appearing between each row. The following doesn't quite achieve this as I had wanted:</p>
  
  <pre><code>.loginPortals{
      width:100%;
  }
      .loginPortals tbody:first-child td{
          border-top:1px solid #000;
      }
      .loginPortals tbody tr td{
          border-bottom:1px solid #000;
          padding:1em 0;
      }
  </code></pre>
  
  <p>The first-child selector isn't working as I had thought it would. It is applying the top border to all the cells in all the rows. This is causing the line thickness to double in the middle of the rows.</p>
  
  <p>How do I fix this so that the top border is only applied to the top row without creating extra classes or applying any inline style.</p>
  
  <p>Thank you!<br>
  Joe</p>