无法集中DIV的内容

Question

我正在用div s创建一个表。我能够创建它，但是在某些情况下，有一排我需要合并和中心。

这是我的代码。

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableCell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">$2</div>
      <div class="divTableCell">1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;6</div>
    </div>
  </div>
</div>

在这里，我希望6位于中心。我该如何实现？

基本上如下表

<table border="1px solid black">
  <tr>
    <td>$2</td>
    <td>1</td>
  </tr>
  <tr>
    <td colspan="2" align="center">6</td>
  </tr>
</table>

Answer 1

如果此单元格在底部

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">$2</div>
      <div class="divTableCell">1</div>
    </div>
  </div>
  <div class="divTableCaption">
    6
  </div>
</div>

CSS

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableCell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableBody {
  display: table-row-group;
}
.divTableCaption { /* <== Only added this */
  display: table-caption;
  text-align: center;
  border: 1px solid #999999;
  caption-side: bottom;
}

Answer 2

CSS中有 colspan。（HTML-ColSpan-in-CSS）

a 解决方案

.tr {
  width: 100%;
}
.tr:after {
  content: " ";
  display: table;
  clear: both;
}
.td {
  border: 1px solid;
  float: left;
  box-sizing: border-box;
  padding: 3px 10px;
}
.col-6 {
  width: 50%;
}
.col-12 {
  width: 100%;
}
.text-center {
  text-align: center;
}

<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td col-6">$2</div>
      <div class="td col-6">1</div>
    </div>
    <div class="tr">
      <div class="td col-12 text-center">6</div>
    </div>
  </div>
</div>

Bootstraps的网格布局提供了。

Bootstrap 解决方案

.bordered>div[class^=col-] {
  border: 1px solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row bordered">
    <div class="col-xs-6">A</div>
    <div class="col-xs-6">B</div>
  </div>
  <div class="row bordered">
    <div class="col-xs-12 text-center">C</div>
  </div>
</div>

Answer 3

尝试此

.divTableRow{
width:100%;
display:flex;
justify-content:center;
}