Column Too High

Question

I use Datatables , a jQuery plugin to create custom tables. I am trying to create a table with many columns now, at least one of them contains a lot of text. The problem is that a column with long text is not created wider, but taller, which makes the table more difficult for the user to read.

How can I make a column of text wider and less tall?

Here is a screenshot of my problem:

Here is my problem:

http://live.datatables.net/ujudij/edit#javascript,html

Answer 1

You can probably use the css text-overflow property: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ and combined with a cell hint that has long text.

Answer 2

You can check the text length for each td after finishing the datatable render processing. If the text length exceeds the limit you set, you can set a larger width for this cell of the ie td table. Thus, you can expand any cell that exceeds the desired height, even if you do not know where it is in the table.

Here is the code

$(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%", "fnInitComplete": function(oSettings, json) { $('#example tr').each(function(i){ $('td', this).each(function(j){ // get length of text var l = $(this).text().length; // set larger width if text length is greater than 300 characters if(l > 300){ $(this).width(400); } }); }); } }); }); 

See the demo of this code.

You can also use cell height with var l = $ (this) .height (); , but I don’t think that this will give you the correct result, because before adjusting the width of other cells in the same row, which may not have large texts, also has the same height, so their width property will also be changed using this, which is wrong for your situation, I think

Although I think the best idea would be to trim the text for the constraint, add a “more” link and show the full text using some kind of plugin like qTip

Answer 3

I wrote a small jQuery plugin to limit the text strings of an element, hope this can help.

 /** * Binaray search with callback */ function bisearch(left, right, search, getter){ var pos, result; if (typeof getter !== "function") { getter = function (x) { return x; }; } while (left <= right) { pos = (left + right) / 2 | 0; result = getter(pos); if (result < search) { left = pos + 1; } else if (result > search) { right = pos - 1; } else { return pos; } } return -1; } ;(function($){ var getLineHeight = function(el) { var self = el, $self = $(self), content = $self.html(), lineHeight; if (typeof $self.attr("style") !== "undefined") { orgStyleAttr = $self.attr("style"); } $self.html("&nbsp;").css("min-height", "0px"); lineHeight = $self.height(); $self.html(content); if (typeof orgStyleAttr !== "undefined") { $self.attr("style", orgStyleAttr); } else { $self.removeAttr("style"); } return lineHeight; } $.fn.limitLines = function(maxLines){ $(this).each(function(){ var self = this, $self = $(self), content = $self.html(), height = $self.height(), lineHeight = getLineHeight($self), maxHeight = lineHeight * maxLines; if (Math.floor(height/lineHeight) <= maxLines) return; // this search will stop when the text meet the line count, // but the last line will be of any length var middleOfLastLine = bisearch(0, content.length, maxLines, function (n){ $self.html(content.substring(0, n)); return Math.floor($self.height() / lineHeight); }); // search for position from current to current plus one more line, // until we find the excact position(p) to stop, // where if one more letter was added, // there will be a new line var endOfLastLine = bisearch(middleOfLastLine, content.length, maxLines + .5, function (n){ $self.html(content.substring(0, n - 3) + '...'); var before = Math.floor($self.height() / lineHeight); $self.html(content.substring(0, n - 2) + '...'); var after = Math.floor($self.height() / lineHeight); return (before + after) / 2; }); $self.html(content.substring(0, endOfLastLine -3) + '...'); }); }; })(jQuery); 

Answer 4

you need to use aoColumnDefs , which allows you to target specific columns by type or number and set the width of the desired columns using the built-in sWidth property of the plugin:

 $(document).ready(function() { var data = $('#example').dataTable({ "sScrollX":"100%", "aoColumnDefs": [ { "sWidth": "1500px", "aTargets": [5] } // this will target the 6th column (the first being 0) ] }); }); 

working example

documentation

If you don’t know in advance which columns should be targeted, you can always get the length row in each cell and act accordingly. those. if the length exceeds a certain number. characters, you add the column number to the array, and then move on to aTargets

Answer 5

You can enlarge the column however you want, I used 70%, but you can also use pixels like 400px

http://live.datatables.net/ajemid/4/edit

 $(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%", "aoColumnDefs": [ { "sWidth": "70%", "aTargets": [ 0 ] } ] }); } ); 

"aTargets": [0] for the first column, 1 for the second, etc.

To limit the text, you can apply css properties such as max-height: 200px; and overflow: hidden; You can also apply a vertical gradient (transparent to white) at the bottom of the cell to provide a smooth effect to white for the long cell.

Answer 6

 $(document).ready( function () { $('#example').dataTable( { "bAutoWidth": false } ); } ); 

Later set width for <td> inside your table.

Answer 7

The simplest task is to transfer everything that is included in the table with the nobr html tag. This may not be the most elegant solution, but it will work, and you can use CSS to limit the width of the cells and set the overflow. I cloned your example here .

Reading the DataTables documentation, the manual can only work if you call datatable() on an existing DOM element. If you want to do this while loading data from an array or from an AJAX source, you may need to programmatically wrap the data in each cell of the table with nobr tags using jQuery. The nice thing about this is that you can have more control over what you decide now.

The DataTables API provides a pre-init or post-init API - you can bind a jQuery function callback that iterates through all the TDs in the table and wraps the contents with nobr tags.

Hope that made sense. Good luck

Answer 8

You can make scrollbars automatically display on oversized data

 <style> .box{width:250;height:75;overflow:auto} </style> <div class="box" >your data here will only have a scrollbar if it overflows your predefined height width parameters</div> 

Answer 9

Specify your own width for each column.

 $(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%", "aoColumns": [ { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" }, { "sWidth": "30%" } ] }); } ); 

Answer 10

your decision - %

change the name of this class td from odd gradeA to what_ever and add this

  width: 80%; 

Of course, you can play with him as much as you want.

or change it

  <tr class="odd gradeA"> //of the long text 

to

  <tr style="width: 80%"> 

and all other td will be launched so that you can do the same with other td as much as you like % hope it helps

Answer 11

In my opinion, you should limit the output from your script to the server side, it will create a better visual effect, but also save some bandwidth and reduce page load

Answer 12

Improvising @Burhan's answer: you can limit the characters directly displayed in the cell and add them to the cell header to create a tooltip type (== qTip?)

 $(document).ready(function() { $('#example').dataTable({ "sScrollX":"100%", "fnInitComplete": function(oSettings, json) { $('#example tr').each(function(i){ $('td', this).each(function(j){ // get length of text var l = $(this).text().length; var limit = 200; // set larger width if text length is greater than 300 characters if(l > limit){ $(this).attr('title',$(this).text()) .text($(this).text().substr(0,limit)); } }); }); } }); }); 

change the limit variable to whatever is convenient for you .........