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

Posted 2021-04-06

我在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>

答案

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

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

.divTable {
  table-layout: fixed;
}

有关修复，请参阅此JSFiddle。

看看这个Mozilla docs，阅读有关table-layout财产的信息。

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

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