Gdy jedna kolumna ma długą wartość, bez spacji, tabela wyłamuje się z dowolnego kontenera z ustawioną szerokością (lub procentem). Obecnie potrzebuję stołu o szerokości 50%, a długa wartość rozbija stół z pojemnika o szerokości 50%.

Ten jsFiddle upraszcza mój problem, o szerokości 70% i dowolnym niestandardowym CSS, którego użyłem nadpisując typowy CSS DataTables.net (oprócz stylizacji wizualnej).

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;
}

Uwaga: zdaję sobie sprawę, że nie powinienem używać !important, ale to problem na inny dzień.

Proszę zobaczyćjsFiddle dla konkretnych opcji JS i DataTables.net używam.

Chciałbym odciąć / skrócić długą wartość za pomocą elips za pomocą CSS. Prawdopodobnie potrzebuję czegoś takiego:

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

Jedynym rozwiązaniem, które zadziałało dla mnie, jest posiadaniediv wtd i ustawienie amax-width/width nadiv, ale nie chcę ustawiać stałej szerokości, ponieważ chcę, aby została ona wyodrębniona z opcji DataTables.net, używającsWidth opcja.

Zrobiłem trochę badań, ale jeszcze nie wymyśliłem żadnych solidnych rozwiązań. Czy ktoś ma na to rozwiązanie?