调整 Html 表格单元格的大小效果答案

【问题标题】：Resizing effect on Html Table cell调整 Html 表格单元格的大小效果
【发布时间】：2009-07-29 12:39:21
【问题描述】：

我需要 jQuery 帮助。

我们可以动态调整表格单元格的大小吗？如果我们调整它的大小，改变仅影响该特定单元格，其余部分应保持不变。

【问题讨论】：

我不认为这真的是一个 jQuery 问题，更像是一个 HTML + CSS 问题。

标签： jquery html css

【解决方案1】：

想一想桌子。垂直列都与行对齐。这就是使它成为一张桌子的原因。一些浏览器可能允许您修改单个表格单元格的大小，但我不会真正推荐它，因为结果可能无法预测。

我解决这个问题的方法是在单元格内放置另一个元素，但围绕您的内容。然后你可以调整其他元素的大小。

【讨论】：

【解决方案2】：

如果您调整列或行中一个单元格的大小，则行和列将根据需要和设计调整大小以适应该单元格。正如 edeverett 所指出的，这是使它成为一张桌子的部分原因。

一种方法可能涉及更改 rowspan="" 和 colspan="" 值，但如果这样做，您还必须操作其他单元格，从文档中删除/隐藏它们，否则您最终可能会得到单元格太多，导致奇怪的渲染问题。

我真的会避免这种情况。如果您想为单元格内容添加区别，请使用颜色。字体大小和更改大小更有可能弄乱显示和 UI，而不是帮助任何人。

【讨论】：

【解决方案3】：

您可能需要根据新的大小计算剩余 TD 的大小，然后同时更改所有 TD 的宽度。

【讨论】：

【解决方案4】：

看看Adjusting HTML Table Cell Width using jQuery。使用这种方法，特定列的所有行都有特定的大小。

  $(document).ready(function () {





    //Set width of table cells
    var numberOfColumns = 7;
    $('.resultGridTable th, .resultGridTable td').each(function (i) {


        $(this).css('background-color', (['Purple', 'Orange', 'Purple', 'Orange', 'Purple', 'Orange', 'Purple'][i % 7]));

        if (i % numberOfColumns == 0) {
            $(this).css('width', '15%');
        }

        if (i % numberOfColumns == 1) {
            $(this).css('width', '15%');
        }

        if (i % numberOfColumns == 2) {
            $(this).css('width', '15%');
        }

        if (i % numberOfColumns == 3) {
            $(this).css('width', '15%');
        }
        if (i % numberOfColumns == 4) {
            $(this).css('width', '10%');
        }
        if (i % numberOfColumns == 5) {
            $(this).css('width', '15%');
        }

        if (i % numberOfColumns == 6) {
            $(this).css('width', '15%');
        }


    }
);


}
);

【讨论】：