заголовки таблиц и прокручиваемый стол отлично не отображаются

У меня есть две разные таблицы: одна для данных заголовка и вторая для прокручиваемого тела.заголовки таблиц и прокручиваемый стол отлично не отображаются

<div class="form-horizontal" style="margin-top:15px;"> 
    <table id="header"> 
     <thead> 
      <tr> 
       <th></th> 
       ...8x 
      </tr> 
     </thead> 
    </table> 
    <div id="table-container" style="overflow-y:auto; max-height:150px;"> 
    <table class="table" id="table"> 
     <tbody> 
       <tr> 
        <td ></td> 
        ...8x 
       </tr> 
     </tbody> 
    </table> 
    </div> 
</div>

Теперь я хочу установить ширину таблиц с помощью JQuery.

$('#table td:nth-child(1)').width('8%'); 
$('#table td:nth-child(2)').width('8%'); 
$('#table td:nth-child(3)').width('8%'); 
$('#table td:nth-child(4)').width('0%'); 
$('#table td:nth-child(5)').width('8%'); 
$('#table td:nth-child(6)').width('8%'); 
$('#table td:nth-child(7)').width('23%'); 
$('#table td:nth-child(8)').width('23%'); 
$('#header th:nth-child(1)').width('8%'); 
$('#header th:nth-child(2)').width('8%'); 
$('#header th:nth-child(3)').width('8%'); 
$('#header th:nth-child(4)').width('0%'); 
$('#header th:nth-child(5)').width('8%'); 
$('#header th:nth-child(6)').width('8%'); 
$('#header th:nth-child(7)').width('23%'); 
$('#header th:nth-child(8)').width('23%');

При запуске проекта заголовок отображается как (например, первый столбец):

<th style="width: 10%;"></th>

(ожидается, ширина: 8%)

и тело renderd, как (пример первого столбца):

<td style="width: 16%;"></td>

(ожидается, ширина: 8%)

так что планировка не соответствует. Почему визуализированный вывод отличается от ожидаемого?

(от вопроса, я установил probelem установкой ТД ту же ширину, как го с JQuery:

var ths = $('#header').children('thead').children('tr').children('th').length; 
    for (counter = ths; counter >= 0; counter--) { 
     var headerwidht = $('#header th:nth-child(' + counter + ')').width(); 
     $('#table td:nth-child(' + counter + ')').width(headerwidht + 'px'); 
    }

, но я до сих пор интересно, почему таблица оказывает неожиданно .)

источник

2015-07-03 Cageman

Почему вы используя jQuery для этого вместо CSS? –

Becaus 4-й колонки, это может быть скрыто или нет. Таким образом, с помощью JQuery я изменяю размер таблицы. И я сделал это в первую очередь с помощью CSS, но когда столбец был скрыт, макет был более разным. – Cageman

Хорошо работает для меня http://jsfiddle.net/m42k8pf7/1, у вас есть другие скрипты, запущенные на нем? – Pete

После долгих поисков я исправил проблему, используя .css('width' '*%') вместо .width('*%') Это решило проблему.

Глядя на код первого столбца:

$('#header th:nth-child(1)').css('width', '6%');

теперь возвращает:

<th style="width: 6%;"></th>

Я не знаю, почему это решает проблему, но исправить это

источник

2015-07-09 05:59:37 Cageman

У вас есть css "table-layout: fixed" для обеих ваших таблиц? Вы должны иметь его, когда вы устанавливаете ширину для td/th таблицы с процентом.

BTW, так как сумма суммарной ширины не должна быть равна 100%, вы должны использовать JS для переключения класса для своих таблиц без изменения их ширины. И базовый класс, вы можете использовать CSS, чтобы показать/скрыть столбцы, если хотите, или даже изменить, если необходимо, ширину столбцов.

Надеюсь, это поможет.

источник

2015-07-09 02:30:45

заголовки таблиц и прокручиваемый стол отлично не отображаются

ответ

Смежные вопросы