如何删除引导网格中不需要的间隙，使其看起来像一个表？

Question

我有一个这样的表，我用div创建。但是，如果文本太长，则此行中的所有单元格都将填充白色背景颜色。

* {
  word-break: break-word;
}       
div {
  display: block;
  border: 1px solid black;
}
.main_div {
  background-color: #D8D8D8;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
}
p {
  display: inline;
}
#verzeichnis {
  text-align: center;
}
.tabelle {
  background-color: #AAAAAA;
  border: 1px solid black;
}
.test {
  background-color: #D8D8D8;
}

<div class="row">
  <div class="col-sm-12 tabelle">
    <p id="verzeichnis"> Test 1 </p>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>A</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p>Status</p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>B</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> short text </p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>short text</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p><span style='color:green'><i class='fa fa-check-circle-o'></i></span></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>very long text which should break to the next line because word wrap is set to break-word</p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3" style="background-color: #D8D8D8;">	
      <p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>A</p>
    </div>
    <div class="col-sm-3" style="background-color: #A4AfA4;">		
      <p>Status</p>
    </div>
    <div class="col-sm-3" style="background-color: #D8D8D8;">		
      <p>B</p>
    </div>
  </div>

</div>

注意：stackoverflow似乎不了解bootstrap，即使我将其作为外部库包含在我的代码段中。如果您运行代码段，它应该是这样的：

我的目标是移除白色间隙，使其看起来像这样。

Answer 1

我会使用真实的表格来表格数据。无论如何，您可以使用CSS display:table来解决此问题。

<强>父：

.row {
  margin-left: 0px;
  margin-right: 0px;
  display:table;
  width:100%;
}

<强>儿童：

.row .col-sm-3 {
  display:table-cell;
  float:none;
}

我建议将此CSS应用于特定容器，以最大限度地减少与引导程序的默认样式的混乱，例如.customTable .row和.customTable .row .col-sm-3

jsFiddle example