1

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

 $(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在表格中添加一些值时，列的对齐方式略有改变，如本小提琴中给出的那样，在这种情况下也是. 我该如何解决这个问题？

4

2 回答 2

1

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

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

演示 JSFiddle

于 2014-07-07T06:32:31.657 回答
0

经过几次尝试，通过使用 jquery属性将 alltd的宽度设置为相应标题行的宽度来解决问题，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 建议的那样。

工作小提琴

于 2014-07-09T07:22:20.593 回答