CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Black
Black

Reputation: 20282

How to remove unwanted gap in bootstrap grid, so that it looks like a table?

I have a table like this which i created with div's. However, if a text is too long, then all the cells from this row will be filled with white background color. 

* {
  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>

NOTE: stackoverflow does not seem to understand bootstrap, even though i included it as external library into my snippet. This is how it should look if you run the snippet:

enter image description here

My goal is to remove the white gap so it looks like this.enter image description here

Upvotes: 0

Views: 92

Answers (1)

Aziz
Aziz

Reputation: 7783

I would have used a real table for tabular data. Anyway, you can use CSS display:table for a workaround.

Parent:

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

Children:

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

I would suggest applying this CSS to to a specific container to minimize messing with bootstrap's default styling, like .customTable .row and .customTable .row .col-sm-3

jsFiddle example

Upvotes: 3

Related Questions