How do we format the cell size to be constant

Question

We are showing the list of topics as at the top of the table, because of varying widths the column width gets either bigger or smaller. We would like to keep this to a constant size and probably add dot suffixes at the end to keep it constant. How do we do this dynamically.

e.g. topic names could be Mathematics, Science, English, History, Biology, Environmental Science ...

We would like them to be rendered as Mathema... , Science, History, Biology, Environ... (I would prefer the formatting happens on the client side, I don't want the server side to format these strings). How do we do this?

Answer 1

var str = 'Mathematics';

if (str.length > 7) {
   str = str.slice(0,7) + '...';
}
// str == 'Mathema...' is true...

---

var str = ['Mathematics', 'Science', 'English', 'History', 'Biology', 'Environmental Science'];

for (i=0;i<str.length;i++)
   if (str[i].length > 7) {
      str[i] = str[i].slice(0,7) + '...'
   }
// str == ['Mathema...' , 'Science', 'History', 'Biology', 'Environ...']

give more details and we can get more to something...

Answer 2

Why not do it entirely in CSS?

This can be done using CSS and avoid any client side processing. If you would like to speed up table rendering you can also set table's table-layout to fixed which will prevent table cells from recalculating dimensions based on content. It renders tables (especially long ones) much much faster if you can guarantee that your content will actually fit.

Anyway. Here's some CSS:

table
{
  table-layout: fixed;
}

td
{
  width: 50px; /* set this to whatever width you'd like */
  overflow: hidden;
  text-overflow: ellipsis; /* IE, Safari, Chrome */
  -o-text-overflow: ellipsis; /* this one's for Opera */
  white-space: nowrap;
}

This will display correctly in IE, Chrome, Opera and Safari. But FF won't display it. But there's a workaround for it as well. There's information about if on Mozilla's web site. It says -moz-binding can be used to serve this purpose. And this blog post shows you how to do it.

Javascript approach

But if you'd like to take the script approach I suggest you don't break the word after a certain amount of characters, because you'll end up with various length words depending on letter used in them. "WMWMWM" is much longer than "IIIIII" even though they are both 6 characters long.

The best way would be to do it this way:

• create a dummy absolutely positioned and hidden (by visibility and not display) div but keep it's font styles completely the same as your table cells have.
• loop through all cells and for each:
  1. take a cell
  2. copy cell content into div
  3. check div width fits appropriate width and if it does copy its content back to cell and go back to step 1
  4. remove last character and attach an ellipsis
  5. go to step 3

This way you'll end up with the longest possible strings in cells that fit cell width. So if some word has letters that are wide (like m, w) or letters that are very narrow (i), it will clip the string correctly and only when it needs to.

Answer 3

You've tagged jQuery, so here's the jQuery answer:

$(document).ready(function() {

    $("table th").each(function() {
        var text = $(this).text();
        if (text.length > 7) {
           $(this).text(text .slice(0,7) + "...");
        }

    });

});

Here's a working fiddle for you to look at.