title: Vertical line between table rows. Merge two cells (headers)
body: <p>I added a few simple tables in HTML. I am looking for a solution for two issues.</p>
  
  <p>1) 
  After I added this tables on my subpage I see that the tables are almost the same but they have in different place their horizontal line between table rows.</p>
  
  <p>2) 
  I would like to merge two headers.</p>
  
  <p>I can't fix this using code-Live editor.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.blueTable {
    border: 0px solid #FFFFFF;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
  }
  
  .divTable.blueTable .divTableCell,
  .divTable.blueTable .divTableHead {
    border: 1px solid #AAAAAA;
    padding: 3px 5px;
    text-align: left;
  }
  
  .divTable.blueTable .divTableBody .divTableCell {
    font-size: 13px;
  }
  
  .divTable.blueTable .divTableRow:nth-child(even) {
    background: #FFFFFF;
  }
  
  .divTable.blueTable .divTableHeading {
    background: #5DBCD2;
    border-bottom: 2px solid #444444;
  }
  
  .divTable.blueTable .divTableHeading .divTableHead {
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
    border-left: 0px solid #F5F4F4;
  }
  
  .divTable.blueTable .divTableHeading .divTableHead:first-child {
    border-left: none;
  }
  
  .blueTable .tableFootStyle {
    font-size: 14px;
  }
  
  .blueTable .tableFootStyle .links {
    text-align: right;
  }
  
  .blueTable .tableFootStyle .links a {
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
  }
  
  .blueTable.outerTableFooter {
    border-top: none;
  }
  
  .blueTable.outerTableFooter .tableFootStyle {
    padding: 3px 5px;
  }
  
  .divTable {
    display: table;
  }
  
  .divTableRow {
    display: table-row;
  }
  
  .divTableHeading {
    display: table-header-group;
  }
  
  .divTableCell,
  .divTableHead {
    display: table-cell;
  }
  
  .divTableHeading {
    display: table-header-group;
  }
  
  .divTableFoot {
    display: table-footer-group;
  }
  
  .divTableBody {
    display: table-row-group;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="divTable blueTable" style="width: 100%"&gt;
    &lt;div class="divTableHeading"&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableHead"&gt;People&lt;/div&gt;
        &lt;div class="divTableHead"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="divTableBody"&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;Lang&lt;/div&gt;
        &lt;div class="divTableCell"&gt;54&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;Height&lt;/div&gt;
        &lt;div class="divTableCell"&gt;22&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;Weight&lt;/div&gt;
        &lt;div class="divTableCell"&gt;66&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;Et&lt;/div&gt;
        &lt;div class="divTableCell"&gt;55&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;Color&lt;/div&gt;
        &lt;div class="divTableCell"&gt;wb&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;A&lt;/div&gt;
        &lt;div class="divTableCell"&gt;10&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  
  
  &lt;div class="divTable blueTable" style="width: 100%"&gt;
    &lt;div class="divTableHeading"&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableHead"&gt;Country&lt;/div&gt;
        &lt;div class="divTableHead"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="divTableBody"&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;E&lt;/div&gt;
        &lt;div class="divTableCell"&gt;11&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;P&lt;/div&gt;
        &lt;div class="divTableCell"&gt;23&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;R&lt;/div&gt;
        &lt;div class="divTableCell"&gt;32&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;H&lt;/div&gt;
        &lt;div class="divTableCell"&gt;45&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="divTableRow"&gt;
        &lt;div class="divTableCell"&gt;I&lt;/div&gt;
        &lt;div class="divTableCell"&gt;57&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/br&gt;
  &lt;/br&gt;</code></pre>
  </div>
  </div>
  </p>