Bootstrap 4 text-truncate not working in a table cell

Question

There are several questions on SE about this issue in Bootstrap 3, which have been solved by adding a custom class. Bootstrap 4 includes a text-truncate class to limit the display of text inside an element. We've used it in parts of the site without issue.

However, it doesn't work when applied to a table cell. Here's what we tried - in reality, there are multiple columns to the table but I've trimmed it down to one.

<table class="table table-striped table-bordered table-hover table-hover-cursor" id="tblData">
<thead class="thead-light">
<tr>
  <th scope="col" data-bind="tableSort: { arr: _data, propName: 'text()'}">Text</th>
</tr>
</thead>
<tbody data-bind="foreach: pagedData">
    <tr>
        <td data-bind="text: text()" class="text-truncate"></td>
    </tr>
</tbody>
</table>

There are various other question about this which suggest you need to put the text inside a span to have it work. But this doesn't work either.

<tr>
    <td>
      <span data-bind="text: text()" class="text-truncate"></span>
    </td>
</tr>

I've also tried moving the class to the td and having it on both the td and the span. None of it works.

Another common suggestion is to add the text class. Although that doesn't seem to be a default class in Bootstrap. This doesn't work either.

<tr>
    <td>
      <span data-bind="text: text()" class="text text-truncate"></span>
    </td>
</tr>

Again, moving or duplicating the class on the td doesn't make any difference. I wasn't sure if a size limitation might be needed so I tried this:

<tr>
    <td data-bind="text: text()" class="col-md-2 text-truncate"></td>
</tr>

But still the text is displayed in full with no elipsis.

In all cases I've check the element to make sure it's picking up the text-truncate class and that the styles are being applied, and they are.

This does work:

<tr>
    <td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>

But I'd prefer to stick to Bootstrap classes. What's the correct set of elements and classes to get this to work?

Answer 1

AFAIK there isn't a Bootstrap class that will solve this if the table columns have fluid width. The simplest solution is to use:

.table {
    table-layout: fixed;
}

https://www.codeply.com/go/NysJfvWtst