In HTML Table How to Force Cell Text to Truncate and Not Increase The Width of The Cell or Wrap

In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap

Set a width on the entire table as well. The width can be set as a percentage, in pixels, or in other units. You might think that it suffices to set the width of each column, or the width of each cell in the first row, but for some odd reason it doesn’t.

Fixed layout for tables has many quirks and oddities, and one of them is that if content does not fit, the column gets wider, unless the total width of the table has been set. This seems to happen so consistently in browsers that one might even think it’s part of the specs (but it isn’t, as far as I can see).

If you want to set fixed width (with truncation when needed) for some column(s) without setting the total width, I’m afraid you need a workaround like <td><div>...</div></td> with the width and overflow properties set on the div element.

CSS text-overflow in a table cell?

To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div elements are required:

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

For responsive layouts; use the max-width CSS property to specify the effective minimum width of the column, or just use max-width: 0; for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;, and the columns will typically have their width set as percentage of the total width

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

CSS - Keep Table Cell from Expanding and Truncate Long Text

add word-wrap: break-word to your cell style..

Though you should really avoid inline styles and declare a class for the cells..

updated:

jsfiddle

Fluid table: Truncate cell contents when needed, otherwise keep the table as narrow as possible

OK, I found a solution. Fiddle here.

Strategy:

Use a hidden table to glean the desired cell widths of the visible table.

Tactic:

In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the visible table.

The shadow table must allow the content to wrap inside the cells (this is default table behavior).

When the page has loaded and at every window resize, show() the shadow table, measure the width of every td in the top row, then hide() the shadow table. Then copy the width values to the corresponding td elements in the visible table, which must have Chris Coyier's truncate applied.

Works in all browsers I've tested, including mobile.

Bonus tips:

• Use ­ to wrap long words if necessary, and   to stop words from wrapping. This can be applied only in the shadow table.
• Use 1px more cell padding in the shadow table due to a bug in Internet Explorer - otherwise, IE's visible table sometimes becomes slightly wider than the shadow table.

JavaScript (requiring jQuery):

<script type="text/javascript">

function loadEvents() {
  initFluidTables();
}

// Resize fluid table(s)
function resizeFluidTables() {

  // Show source cells
  $( ".fluid-table-invisible-source" ).show(0);

  var fluidTableCellWidth = [];

  // Measure (normally invisible) source cells
  $( ".fluid-table-invisible-source td" ).each(function( index, value ) {
    fluidTableCellWidth[index] = $( this ).width();
  });

  // Resize (always visible) target cells. Adding 1 pixel due to apparent bug in Firefox.
  $( ".fluid-table-visible-target td>i" ).each(function( index, value ) {
    $( this ).css({'width': fluidTableCellWidth[index]+1 });
  });

  // Re-hide source cells
  $( ".fluid-table-invisible-source" ).hide();

}

// Create table(s) to be fluid
function initFluidTables() {

  // Create a container. Not really necessary, but keeps DOM tidier.
  $(".fluid-table").wrap( "<div></div>" );

  // This looks like a mess. What it does, is that .fluid-table duplicates itself, and each sibling gets a different class.
  $(".fluid-table").each(function() {
    $( this ).clone().appendTo( $( this ).addClass( "fluid-table-invisible-source" ).parent() ).addClass( "fluid-table-visible-target" );
  });

  // Add truncating element inside target cells
  $(".fluid-table-visible-target td").wrapInner( "<i></i>");

  // Truncate table contents at first drawing of the DOM and every time the window resizes
  resizeFluidTables();
  $( window ).resize(function() {
    resizeFluidTables();
  });
}
</script>

CSS:

.fluid-table td { padding-right: 5px; }

.fluid-table td:nth-child(odd) { color: #aaa; }

.fluid-table-visible-target td>i {
  font-style: inherit;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* source slighly more padded than target due to IE bug */

.fluid-table-invisible-source td:nth-child(even) {
  padding-right: 10px;
}

.fluid-table-visible-target td:nth-child(even) {
  padding-right: 9px;
}

Sample table:

Note use of ­ and   to indicate where you (do not) want the text to truncate.

<table class="fluid-table">
  <tr>
    <td>Avail­able <i>until</i>:</td><td>No expiry date</td><td>Avail­ability:</td><td>Worldwide</td><td></td>
  </tr><tr>
    <td>Year:</td><td>2016</td><td>Length:</td><td>29 minutes</td><td></td>
  </tr><tr>
    <td>First broad­cast:</td><td>Feb 2</td><td>Last broad­cast:</td><td>Feb 3</td><td></td>
  </tr>
</table>

How to prevent text in a table cell from wrapping

Have a look at the white-space property, used like this:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

From linked page, here are the various options for white-space:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

How to truncate text in a table column?

There is a way to achieve this without setting the width of the 'long' table cell.

Here are the ingredients:

Add border-collapse: collapse and table-layout: fixed to the table class and give a width instead of a max-width.

• The border-collapse: collapse will give all cells one shared border.
• The table-layout: fixed sets a fixed width.
• Use width to set a fixed width instead of a max-width (can grow to...).

Next to this, add overflow: hidden to the long table cell (next to the initial additions you made), so it knows what to do if the content overflows.

In CSS:

.mytable {
    border-collapse: collapse;
    width: 400px;
    table-layout: fixed;
}

.long-td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Demo:

td {
  border: 1px solid;
}

.mytable {
  border-collapse: collapse;
  width: 400px;
  table-layout: fixed;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<table class="mytable">
  <tr>
    <td>short</td>
    <td class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long </td>
    <td>short</td>
  </tr>
</table>

---

Related Topics