Как установить ширину ячейки таблицы HTML, используя JavaScript и jQuery

Question

У меня есть таблица HTML, как показано ниже;

<table style="width: 100%">
<tr>
<td style="width: 30px">cell</td>
<td class="cell">cell</td>
<td class="cell">cellcell</td>
<td class="cell">cellcellcell</td>
<td class="cell">cellcellcellcell</td>
<td class="cell">cellcellcellcellcell</td>
<td class="cell">cellcellcellcellcellcell</td>
<td style="width: 30px">cell</td>
</tr>
</table>

Таблица предназначена для растягивания на экран (или div с определенной шириной). Я хочу одинаковую ширину для всех ячеек, имеющих class="cell", и это хорошо работает, когда длина символов во всех ячейках, имеющих class="cell", равна. Но я хочу исправить ширину ячейки, даже если длина символов в class="cell" отличается.

Также вы можете видеть, что первая и последняя ячейки имеют фиксированную ширину, в пикселях , а остальные ширины ячеек должны рассчитываться на основе процента. Я хочу равную ширину для всех ячеек (кроме первой и последний с фиксированной шириной в пикселях).

Я думаю, что это можно сделать с помощью Javascript с помощью jQuery, путем вычисления ширины ячеек таблицы в готовом документе, а затем добавления некоторой функции с использованием on window resize и, таким образом, вычисления ширины ячеек. Ширина ячеек будет (tablewidth in px - 60px)/6 Я новичок, и я не знаю много .. Как я могу сделать это, используя jQuery и (или) Javascript.

Будет очень полезно, если кто-то сделает меня скрипкой ..

Answer 1

Вы можете просто сделать это с помощью CSS, применив каждый td равный процент:

td{
 width:   16%;
}

пример: http://jsfiddle.net/niklasvh/wKmxD/

В обновленном вопросе выможно сделать это с помощью javascript, сохранив ширину в массиве, а затем сославшись на это на window resize, и использовать разность пропорций для размещения новой ширины:

var w = [];
var tw = $('table').width();
$('table td').width(function(i,e){
    w[i]=e;
});

$(window).resize(function(){
    $('table td').width(function(i){
    return ($('table').width()/tw)*w[i];
    });
});

http://jsfiddle.net/niklasvh/543D9/