Vertical line between table rows. Merge two cells (headers)

Question

I added a few simple tables in HTML. I am looking for a solution for two issues.

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.

2) I would like to merge two headers.

I can't fix this using code-Live editor.

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;
}

<div class="divTable blueTable" style="width: 100%">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">People</div>
      <div class="divTableHead"></div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">Lang</div>
      <div class="divTableCell">54</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Height</div>
      <div class="divTableCell">22</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Weight</div>
      <div class="divTableCell">66</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Et</div>
      <div class="divTableCell">55</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Color</div>
      <div class="divTableCell">wb</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">A</div>
      <div class="divTableCell">10</div>
    </div>
  </div>
</div>
</br>
</br>


<div class="divTable blueTable" style="width: 100%">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">Country</div>
      <div class="divTableHead"></div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">E</div>
      <div class="divTableCell">11</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">P</div>
      <div class="divTableCell">23</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">R</div>
      <div class="divTableCell">32</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">H</div>
      <div class="divTableCell">45</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">I</div>
      <div class="divTableCell">57</div>
    </div>

  </div>
</div>
</br>
</br>

Answer 1

In answer to your first issue... I've had a good play around and if it is the vertical divider between the cells, then I believe it's a table resizing issue when characters are removed or added.

To prevent this, simply add table-layout: fixed; to the outermost container of the table, in your case it would be .divTable. With thanks to this SO answer.

.divTable {
  table-layout: fixed;
}

See this JSFiddle for the fix.

Check out this Mozilla docs to read up about the table-layout property.

In regards to your second issue, please explain in detail what you mean and wanting to achieve by editing/updating your question.

Lastly, I would highly recommend you read up on the Bootstrap docs, and implement it into your project if haven't already. It helps you to achieve the goals with ease. Bootstrap also has a table structure too, which would be useful in your case.