title: Bottom table border not showing when last row and previous rows has a cell with rowspan and a different border color
body: <p>I have some borders of style <code>double</code>, while some borders of style <code>solid</code> according to my precedence requirements. These styles are for different colors of border of <code>&lt;td&gt;</code> in my table.</p>
  
  <p>This is an example table:
  <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>table {
    border-collapse: collapse;
    width: 100%;
    border-bottom: 1px double #000;
  }
  
  td {
    border: 1px double #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:first-child td {
    border-top: none;
  }
  
  tr:last-child td {
    border-bottom: none;
  }
  
  td:first-child {
    border-left: none;
  }
  
  td:last-child {
    border-right: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td rowspan="2"&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;4&lt;/td&gt;
      &lt;td&gt;5&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  
  My problem is that the bottom border of table is not showing completely. Note that I can't change style from <code>double</code> to <code>solid</code> for given <code>&lt;td&gt;</code> because I am already using them for other <code>td</code> classes (see EDIT).</p>
  
  <h1>EDIT</h1>
  
  <p>The <code>rowspan</code> can be any number.</p>
  
  <p>Here is the complete <code>SCSS</code> file:</p>
  
  <pre><code>$dark-black-grey: #212121;
  $black-grey: #616161;
  $dark-grey: #bdbdbd;
  $medium-grey: #e0e0e0;
  $light-grey: #eeeeee;
  $blue-grey: #b0bec5;
  $light-blue-grey: #cfd8dc;
  $white-grey: #fafafa;
  $blue: #64b5f6;
  $light-blue: #90caf9;
  $white-blue: #bbdefb;
  $green: #81c784;
  $red: #e57373;
  $light-red: #ef9a9a;
  $white-red: #ffcdd2;
  $light-yellow: #fffde7;
  $font-size: 14px;
  $header-height: 30px;
  #data-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 4fr;
    div {
      height: 100vh;
      &amp;:not(:last-child) {
        border-right: 1px double $dark-grey;
      }
      div.table-wrapper {
        height: calc(100% - #{$header-height});
        overflow-x: hidden;
        overflow-y: auto;
        table {
          width: 100%;
          border-bottom: 1px double $dark-grey;
          tr {
            &amp;:first-child {
              td {
                border-top: 0;
              }
            }
            &amp;:last-child {
              td {
                border-bottom: 0;
              }
            }
            td {
              border: 1px double $light-grey;
              padding: 4px 8px;
              &amp;:first-child {
                border-left: 0;
              }
              &amp;:last-child {
                border-right: 0;
              }
              &amp;.fade {
                color: $black-grey;
              }
              &amp;.footer {
                text-align: right;
                font-weight: 500;
              }
              &amp;:not(.warning):not(.info) {
                &amp;.computed {
                  background-color: $light-yellow;
                }
                &amp;.optional {
                  background-color: #ffeeff;
                }
                &amp;.input-box {
                  background-color: $white-grey;
                  &amp;:hover {
                    background-color: $light-grey
                  }
                }
              }
              &amp;.warning {
                background-color: $light-red;
                input {
                  background-color: $light-red;
                }
                &amp;:not(.button) {
                  border-style: solid;
                  border-color: $light-red;
                }
                &amp;.button {
                  background-color: $white-grey;
                  &amp;:hover {
                    background-color: $white-red;
                    border-style: solid;
                    border-color: $white-red;
                  }
                  &amp;:active {
                    background-color: $light-red;
                    border-style: solid;
                    border-color: $light-red;
                  }
                }
              }
              &amp;.info {
                background-color: $light-blue;
                input {
                  background-color: $light-blue;
                }
                &amp;:not(.button) {
                  border-style: solid;
                  border-color: $light-blue;
                }
                &amp;.button {
                  text-align: center;
                  font-weight: 500;
                  background-color: $white-grey;
                  &amp;:hover {
                    background-color: $white-blue;
                    border-style: solid;
                    border-color: $white-blue;
                  }
                  &amp;:active {
                    background-color: $light-blue;
                    border-style: solid;
                    border-color: $light-blue;
                  }
                }
              }
              &amp;.button {
                cursor: pointer;
                padding: 4px;
              }
            }
          }
        }
      }
      table {
        border-collapse: collapse;
        &amp;.popup {
          position: absolute;
          box-shadow: 2px 2px 4px 1px $black-grey;
          td {
            background-color: white;
            padding: 4px 8px;
            cursor: pointer;
            &amp;:hover {
              background-color: $light-grey;
            }
            &amp;:active {
              background-color: $medium-grey;
            }
          }
        }
        &amp;.header {
          width: 100%;
          border-bottom: 1px double $dark-grey;
          height: $header-height;
          tr td {
            text-align: center;
            font-weight: 500;
            padding: 0 4px;
            &amp;.fade {
              color: $black-grey;
            }
            &amp;.button {
              cursor: pointer;
              &amp;:hover:not(:active) {
                background-color: $light-grey;
              }
              &amp;:active {
                background-color: $medium-grey;
              }
            }
          }
        }
      }
    }
  }
  svg {
    display: block;
    margin: auto;
    width: $font-size;
    height: $font-size;
  }
  input {
    border: none;
    padding: 0;
    width: 100%;
    &amp;:hover {
      box-shadow: 0 0 1px 1px $blue
    }
    &amp;:focus {
      outline: none;
      box-shadow: 0 0 1px 1px $green;
      &amp;.invalid {
        box-shadow: 0 0 1px 1px $red
      }
    }
  }
  td.shrink {
    width: 1%;
    white-space: nowrap;
  }
  </code></pre>