title: HTML table partial border on a column
body: <p>I'm trying to create a border on the right of the column called "Name". The border I want it to go from 50% of the top of the row "Name" and that it goes all the way to the bottom to the "Cost" row, however, in the cost row I also want it to be 50% height so it doesn't reach the very bottom of the table. Can someone help me how can I achieve this?</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>icon {
    position: absolute;
    left:-10rem;
    top:-19rem;
  }
  
  table {
      border-top: 5px solid black;
      border-bottom: 5px solid black;
      margin-bottom: 10rem;
      width:70%;
      border-collapse: collapse !important;
      border-spacing: 0 !important;
    }
    th {
      text-align:center!important;
      background-color: green;
      padding: 1rem !important
    }
    td {
      text-align:center;
      line-height:.8em !important;
      background-color: gray
    }
    .services {
      font-weight:bold;
      text-align:left;
  //  border-right: 1px solid black !important;
    }
    .pricing{
      font-weight:bold;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://lorempixel.com/200/200/cats/" style="width:50px;height:50px" class="icon"/&gt;
  &lt;table class="table borderless"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Plan A&lt;/th&gt;
        &lt;th&gt;Plan B&lt;/th&gt;
        &lt;th&gt;Plan C&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 1&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 2&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 3&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 4&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 5&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 6&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td&gt;Not Included&lt;/td&gt;
        &lt;td class="included"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 7&lt;/td&gt;
        &lt;td&gt;Limited&lt;/td&gt;
        &lt;td&gt;Hight Quality&lt;/td&gt;
        &lt;td&gt;Customized&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 8&lt;/td&gt;
        &lt;td&gt;Limited&lt;/td&gt;
        &lt;td&gt;Hight Quality&lt;/td&gt;
        &lt;td&gt;Customized&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="services"&gt;Description 9&lt;/td&gt;
        &lt;td&gt;Limited&lt;/td&gt;
        &lt;td&gt;Hight Quality&lt;/td&gt;
        &lt;td&gt;Customized&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="pricing"&gt;
        &lt;td style="padding-bottom: 2rem !important;" class="table-services"&gt;Cost&lt;/td&gt;
        &lt;td&gt;Price A&lt;/td&gt;
        &lt;td&gt;Price B&lt;/td&gt;
        &lt;td&gt;Price C&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/0GTEY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0GTEY.png" alt="enter image description here"></a></p>