使表格中的所有单元格宽度相等,且宽度等于最宽单元格的宽度。

4

是否可以在不使用固定宽度的情况下,使表格中所有单元格的宽度都等于最宽单元格的宽度。


这是我最近发布的有关表格单元格宽度行为的答案。希望能对您有所帮助。管理HTML表格单元格<td>的宽度 - Michael Benjamin
1个回答

6
是的,它就是。
<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/

[编辑]

正如@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/

[编辑]

这是一个基于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/


只有在有足够的空间可用时,此方法才有效。https://jsfiddle.net/uqvuwopd/2/ 如果没有足够的空间,则内容较少的单元格将忽略您应用的“宽度”。 - connexo
我无法理解你评论中的“it”代表什么。 - connexo
我是说当然只有在有足够的空间时才能正常工作... OP在这种情况下并没有要求任何特殊行为 :) - Andrea Casaccia
1
没有必要“在这种情况下需要特殊行为”,因为他们明确表示他们想要创建等宽列的解决方案。他们没有谈论可用的水平分辨率这一事实仅使您的解释无效化该要求。 - connexo
`var max = 0, $cells = $('td'), $table = $cells.closest('table');$cells.each(function () { var width = $(this).width(); max = max < width ? width : max; });$table[0].width($cells.length*max); $cells.each(function () { $(this).width(33.333333%); });` - connexo
能否一次性设置每个单元格的最小宽度值? - Patryk Imosa

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接