Блог

У меня есть html-таблица, разработанная с использованием twitter bootstrap, и я исправил строку заголовка таблицы на fixed с помощью плагина Fixed TableRC, как указано в этой скрипке. Th Ширина заголовка устанавливается как

  $(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 таблицы, выравнивание столбца немного изменилось, как указано в этом скрипте и в этом случае также. Как я могу исправить эту проблему?

В этом случае вы добавляете текст и ширину столбца, занимая пространство, равное ширине слова с максимальной длиной, т. е. не разбивая слово. Если вы добавите word-break:break-all к себе modal массив, это решит вашу проблему :

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

Демонстрационный JSFiddle

После нескольких попыток проблема решается путем установки ширины всех td элементов на ширину соответствующей th строки заголовка с помощью свойства jquery .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.

Рабочая скрипка