How do I fix long column value issue which breaks table outside of container, using DataTables.net?

Question

When one column has a long value, without spaces, the table breaks out of any container with a set width (or percentage). Currently, I'm needing a table with 50% width, and the long value breaks the table out of the 50% width container.

This jsFiddle simplifies my issue, with a width of 70%, and any custom CSS I've used overriding typical DataTables.net CSS (besides visual styling).

http://jsfiddle.net/mswieboda/8qVh4/

HTML:

<div class="container">
  <table class="grid"></table>
</div>

CSS:

.dataTable {
  width: 100% !important;
  margin: 0;
}
.dataTables_wrapper {
  position: relative;
}
.dataTables_scrollHeadInner {
  width: 100% !important;
}
.container {
  position: relative;
  width: 70%;
  border: 1px solid #f0f;
}
.container .grid {
  position: relative;
  overflow-x: hidden;
}

Note: I realize I shouldn't use !important, but that's an issue for another day.

Please see the jsFiddle for the specific JS, and DataTables.net options I'm using.

I'd like to cut off/truncate the long value with ellipses using CSS. I probably need something like:

.dataTable tbody td {
  text-overflow: ellipsis;
  overflow: hidden;
}

The only solution that's worked for me is to have a div in the td and setting a max-width/width on the div, but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.

I've done some research, but haven't come up with any solid solutions yet. Does anyone have a solution for this?

Answer 1

Add this CSS. The CSS must be applied before the table is renderd.

table { table-layout: fixed; }

td { 
 overflow: hidden;
 text-overflow: ellipsis; 
}

jsfiddle

If you don't really need to show ellipses, you can force a line break inside the td.

table { table-layout: fixed; }
td { word-wrap:break-word; }