表格行之间的垂直线。合并两个单元格（标题）

Question

我在 HTML 中添加了一些简单的表格。我正在寻找两个问题的解决方案。

1) 在我的子页面上添加这些表格后，我发现这些表格几乎相同，但它们在表格行之间的水平线位置不同。

2) 我想合并两个标题。

我无法使用实时代码编辑器解决此问题。

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

回答您的第一个问题...我玩得很开心，如果它是单元格之间的垂直分隔线，那么我相信这是在删除或添加字符时调整表格大小的问题。

为防止这种情况发生，只需将table-layout: fixed; 添加到表的最外层容器中，在您的情况下为.divTable。感谢SO answer。

.divTable {
  table-layout: fixed;
}

请参阅此JSFiddle 以获取修复。

查看此Mozilla docs 以了解有关table-layout 属性的信息。

关于您的第二个问题，请详细说明您的意思和希望通过编辑/更新您的问题来实现的目标。

最后，我强烈建议您阅读Bootstrap docs，如果还没有将其实施到您的项目中。它可以帮助您轻松实现目标。 Bootstrap 也有一个table structure，这对你的情况很有用。