Сделать все ячейки в таблице одинаковой шириной, равной ширине ячейки.

Question

Возможно ли иметь такую ​​же ширину для всех ячеек в таблице, которая равна ширине самой широкой ячейки без использования фиксированной ширины.

Answer 1

Да, это так.

<table> 
    <tr> 
     <td>short</td> 
     <td>longer</td> 
     <td>the longest cell</td> 
    </tr> 
</table> 

var max = 0, 
    $cells = $('td'); 

$cells.each(function() { 
    var width = $(this).width(); 
    max = max < width ? width : max; 
}); 

$cells.each(function() { 
    $(this).width(max); 
}); 

https://jsfiddle.net/uqvuwopd/1/

[EDIT]

Как @connexo отметил в комментариях еще какая-то логика необходима, чтобы обработать случай, когда таблица будет больше максимума размер:

var max = 0, 
    $cells = $('td'); 

$cells.each(function() { 
    var width = $(this).width(); 
    max = max < width ? width : max; 
}); 

$table = $cells.closest('table'); 

if ($table.width() < max * $cells.length) { 
    max = 100/$cells.length + '%'; 
} 

$cells.each(function() { 
    $(this).width(max); 
}); 

https://jsfiddle.net/uqvuwopd/3/

[EDIT]

И это версия, основанная на ECMA5, который не требует JQuery:

var max = 0, 
    cells = document.querySelectorAll('td'); 

Array.prototype.forEach.call(cells, function(cell){ 
    var width = cell.offsetWidth; 
    max = max < width ? width : max; 
}); 

var table = document.querySelector('table'), 
    uom = 'px'; 

if (table.offsetWidth < max * cells.length) { 
    max = 100/cells.length; 
    uom = '%'; 
} 

Array.prototype.forEach.call(cells, function(cell){ 
    cell.setAttribute('style','width:' + max + uom); 
}); 

https://jsfiddle.net/uqvuwopd/4/