Question

我有一个使用twitter bootstrap设计的html表，我使用Fixed TableRC中给出的this fiddle插件将表的标题行修复为固定。标题的宽度设置为

 $(document).ready(function() {
   var modal = [];
   var ColNums = document.getElementById('fixed_hdr2').rows[0].cells.length;

   for (var i = 1; i < ColNums+1; i++) {
       var row = $("#fixed_hdr2 th:nth-child("+i+")").width();
    // var row = 30;
       modal.push({ width: row, align: 'center' });
    } 

    $('#fixed_hdr2').fxdHdrCol({
        fixedCols:  0,
        width:     "100%",
        height:    "364px",
        colModal:  modal,
    //  sort: true
    });
   });

它适用于空白表。当我在表格的td内添加一些值时，列的对齐方式会稍微改变，如this fiddle和in this case also中所示。我该如何解决这个问题？

Answer 1

在这种情况下，您将添加文本和列宽，其空间等于具有最大长度的单词的宽度，即不会破坏单词。如果您向word-break:break-all阵列添加modal，那么这将解决您的问题：

modal.push({ width: row, align: 'center' ,word-break:'break-all'});

Demo JSFiddle

Answer 2

经过多次尝试后，通过使用jquery td属性将所有th的宽度设置为标题行的相应.width()的宽度来解决该问题，

var ColNums = document.getElementById('fixed_hdr2').rows[0].cells.length;

   for (var i = 1; i < ColNums+1; i++) {
       var row = $(".ft_r th:nth-child("+i+")").width();
       $("#fixed_hdr2 td:nth-child("+i+")").width(row);
    }

并将word-break:break-all设为

#fixed_hdr2 tr td {
 word-break:break-all;      
        }

@Bhushan Kawadkar建议。

Working fiddle

根据其他td宽度设置th元素的宽度

2 个答案: