text-overflow: ellepsis not working - html

Question

I have this table that I want to spruce up a bit, but am having no succes despite the solutions I have found all across Stackoverflow.
I am using PHP to echo the table, with some some data from an SQL db.
As you can see in the bottom right, the browser does not see the styling I have added for overflow etc..
Below is the html:
<div class="span9">
<div class="container">
<a class="btn" href="records.php">Add New Record</a><br><br>
<table class="table table-hover table-condensed" border="1" cellpadding="10">
<tbody>
<tr>
<th class="th.id">ID</th>
<th class="th.status">Status</th>
<th class="th.cust">Customer</th>
<th class="th.prod">Product</th>
<th class="th.ord">Order Number</th>
<th class="th.ret">Return Code</th>
<th class="th.dop">Date of Purchase</th>
<th class="th.sn">Serial Number</th>
<th class="th.prob">Problem Description</th>
<th class="th.rep">Repair Description</th>
<th class="th.part">Parts Used</th>
<th class="th.com">Comments</th>
</tr>
<tr>
<td><p>1</p></td>
<td><p>Error!</p></td>
<td><p>Jesse</p></td>
<td><p>Fuse</p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p>ComicalCanary</p></td>
<td><p>Not enough sand</p></td>
<td><p>Added sand</p></td>
<td><p>sand 10kg</p></td>
<td><p>I want to put a lot of content into this, to see how far this will go in stretching the table.</p></td>
</tr>
</tbody>
</table>
</div>
And below is my css, i'm using Bootstrap 3.3.7, but this is what I'm adding:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
table-layout: fixed;
}
.table td {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And even the width: 120px; is not even working...
Any clues anyone?

Answer 1

You have to move your ellipsis styling down to the p tag.
.table p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
https://jsfiddle.net/koralarts/y6q3uvkL/1/

Answer 2

Set the max-width on your td css or put a div inside the td with the ellipsis on the div instead. Or set the p width to a fixed number and put the text overflow rule on that.
Table cells are a bit difficult in this regard, text overflow works with block elements (p, div, etc) in the inline direction. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 3

Move both overflow: hidden; and text-overflow: ellipsis; from .table td to a new rule for .table td p, like
.table td {
width: 120px;
white-space: nowrap;
}
.table td p {
overflow: hidden;
text-overflow: ellipsis;
}
Here's the whole thing in a codepen: https://codepen.io/anon/pen/dJPgNZ