title: Issue with table nth-child after add grid-gap
body: <p>Currently our table:
  <a href="https://i.stack.imgur.com/eUyBB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eUyBB.png" alt="enter image description here" /></a></p>
  <p>First have background and second is white - is correct.</p>
  <p>now I would like to move the attributes to the right. I add to table code:</p>
  <pre><code>.table-wrapper tbody {
      font-size: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0 24px;
  }
  </code></pre>
  <p>Now is result:
  <a href="https://i.stack.imgur.com/YuYcb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YuYcb.png" alt="enter image description here" /></a></p>
  <p>But is issue. I need result somelike this:
  <a href="https://i.stack.imgur.com/J8eVD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J8eVD.png" alt="enter image description here" /></a></p>
  <p>Can anyone help me correct our code?</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-js lang-js prettyprint-override"><code>$(document).ready(function()
  {
    $("tr:odd").css({
      "background-color":"#000",
      "color":"black"});
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.additional-attributes tr th {
      border-right: 0px solid #ccc;
      font-weight: 200;
      width: 0%;
  }
  additional-attributes tbody tr {
      border-bottom: 0px solid #ccc !important;
      border-bottom: none !important;
  }
  additional-attributes tr {
      border-bottom: 0px solid #ccc !important;
  }
  .table-wrapper {
      float: left;
      margin-top: 10px;
  }
  .additional-attributes tr td {
      font-weight: 500;
      padding: 10px 10px;
  }
  tbody tr:nth-child(odd){
    background-color: #f8fafb;
    color: black;
  }
  .table-wrapper tbody {
      font-size: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0 24px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="additional-attributes-wrapper table-wrapper"&gt;
          &lt;table class="data table additional-attributes" id="product-attribute-specs-table"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                                  &lt;tr&gt;
                      &lt;th class="label" scope="row"&gt;Parametr&lt;/th&gt;
                      &lt;td class="data"&gt;first&lt;/td&gt;
                  &lt;/tr&gt;
                  
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>update code:</p>
  <pre><code>&lt;style&gt;
  .seller-attributes {
      box-sizing: border-box;
      height: auto;
      padding: 15px;
  }
  .additional-attributes tr th {
      border-right: 0px solid #ccc;
      font-weight: 200;
      width: 0%;
  }
  additional-attributes tbody tr {
      border-bottom: 0px solid #ccc !important;
      border-bottom: none !important;
  }
  additional-attributes tr {
      border-bottom: 0px solid #ccc !important;
  }
  .table-wrapper {
      float: left;
      margin-top: 10px;
  }
  .additional-attributes tr td {
      font-weight: 500;
      padding: 10px 10px;
  }
  tbody tr:nth-child(odd){
    background-color: #f8fafb;
    color: black;
  }
  
  /* ADDED */
  tbody tr:nth-of-type(4n + 3), tbody tr:nth-of-type(4n){
    background-color: white;
  }
  tbody tr:(even){
    padding-left: 24px;
  }
  .additional-attributes tbody tr {
          display: grid;
      grid-template-columns: 2fr 1fr;
  }
  .additional-attributes tr th {
      width: 100%
  }
  &lt;/style&gt;
  </code></pre>