表格列太高了

Question

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

How can I make the text column wider and less higher?

Here is a screenshot with my problem:

Here is my problem visible:

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

Answer 1

您可能会考虑使用css文本溢出属性:http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/,并结合具有长文本的单元格的工具提示.

Answer 2

在数据表渲染完成后,您可以检查每个td的文本长度.如果文本长度超过您定义的限制,则可以为该表格单元格设置更大的宽度,即td.这样,即使您不知道表格中的位置,也可以加宽超出所需高度的任何单元格

这是代码

$(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);
               }
           });
        });
    }
  });
});

请在此处查看此代码演示

你也可以使用var l = $(this).height(); 但我不认为这会为你提供正确的结果,因为在调整宽度之前,同一行中可能没有大文本的其他单元格也有相同的高度,所以它们的宽度属性也会用这个改变,这对你的不正确情况,我想

虽然我认为更好的想法是修剪文本以限制,添加"更多"链接并使用像qTip这样的插件显示全文