Bootsrap table text not wrapping on less width - html

Question

Have probably simple question but can't figure out what's wrong. I am using bootstrap table to show the data. The table is responsive and resizing correctly when the user changes the browser size with only one exception which I can't find the solution to.
Look at the picture I liked to. There are 3 states:
1st when looks normally on full browser size
2nd when user would resize - still ok
3rd when it's been resized a lot then it messes up
Link:
https://www.dropbox.com/s/23pj6w2uu0lz716/fine-fullwith.png?dl=0
Counting on your help.
See my code below:
<style type="text/css">
p {
/*padding: 5px;*/
font-size: 13px;
text-align: center;
word-wrap:break-word;
}
.ar {
height: 50px;
}
.table tbody > tr > td.vert-align_td {
vertical-align: middle;
}
.table thead > tr > th.vert-align_th{
vertical-align: middle;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-lg-2">
</div>
<div class="col-sm-11 col-lg-10">
<div class="row">
<div class="col-md-12">
<div class="content-wrapper"></div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="word-wrap: break-word;table-layout: fixed;">
<thead>
<tr>
<th class="col-md-3 text-center vert-align_th">Nazwa transportu</th>
<th class="col-md-2 text-center vert-align_th">Typ transportu</th>
<th class="col-md-2 text-center vert-align_th">Kierowca</th>
<th class="col-md-1 text-center vert-align_th">Numer rejestracyjny</th>
<th class="col-md-1 text-center vert-align_th">Firma spedycyjna</th>
<th class="col-md-1 text-center vert-align_th">Data przyjecia</th>
<th class="col-md-1 text-right vert-align_th">Przycisk</th>
</tr>
</thead>
<tbody>
#For Each item In Model
#<tr>
#*vert-align - look at top in css section*#
<td class="col-md-3 text-center vert-align_td"><a>#item.NazwaTransportu</a></td>
<td class="col-md-2 text-right vert-align_td">#item.TypTransportu</td>
<td class="col-md-2 text-center vert-align_td">#item.Kierowca</td>
<td class="col-md-1 text-center vert-align_td">#item.NumerRejestracyjny</td>
<td class="col-md-1 text-center vert-align_td">#item.FirmaSpedycyjna</td>
<td class="col-md-1 text-center vert-align_td">#item.DataPrzyjecia</td>
<td class="col-md-1 text-center vert-align_td">
<a rel="tooltip" class="btn btn-success btn-xs" href="">
<i class="glyphicon glyphicon-plus icon-color"></i>
dodaj
</a>
</td>
</tr>
Next
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[1]: http://i.stack.imgur.com/jrybd.png

Answer 1

Bootstrap Tables contain the CSS attribute white-space: nowrap; on every table cell (<td>). This comes by adding the class table-responsive. You can however reset this attribute with the following CSS snippet:
.table tbody > tr > td.vert-align_td,
.table tbody > tr > th.vert-align_th {
white-space: normal;
}