table 行之间的垂直线。合并两个单元格 (headers)

Question

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

1) 在我的子页面上添加此 tables 后，我看到 tables 几乎相同，但它们在不同的位置有 table 行之间的水平线。

2) 我想合并两个 headers.

我无法使用 code-Live 编辑器修复此问题。

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 大小调整问题，当字符被删除或已添加。

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

.divTable {
  table-layout: fixed;
}

请参阅此 JSFiddle 进行修复。

查看此 Mozilla docs 以了解 table-layout 属性。

关于你的第二个问题，请详细说明你的意思，editing/updating你的问题想达到什么目的。

最后，我强烈建议您也阅读 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，这对您的情况很有用。

table 行之间的垂直线。合并两个单元格 (headers)

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

html

css

dreamweaver

bootstrap-4