I am currently working on a page containing an html table and I manage columns width with bootstrap grid. Here is a small example reproducing the situation I am struggling with :
https://jsfiddle.net/ggu5Lpc0/45/
I have based my work on the bootstrap nested columns example.
<tr class="row">
<td class="col-xs-4 title">Rambo</td>
<td class="col-xs-1 synopsis">
<div class="row">
<div class="col-xs-10 synopsis-text">
A movie with Stalone shooting everywhere and wearing a bandana !
</div>
<div class="col-xs-2">
<a class="synopsis-link">
read
</a>
</div>
</div>
</td>
<td class="col-xs-7 note">12 / 10</td>
</tr>
It worked until I decide to change the display of texts inside the second column : Put each text cells in one line only and hide its overflow (with ellipsis).
.synopsis-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Then it seems that the width properties applied by bootstrap on each table cells has stopped working since I have used css property "white-space: nowrap;".
How can I keep columns width set, and put those texts shorten with ellipsis and in one line only (also keep each links of the same line) ?
Why is it not working currently ? I would like to understand !
