Question

我需要jQuery帮助。

他可以动态调整表格单元格吗？如果我们调整它的大小，请更改只影响那个特定的细胞，休息应保持不变。

Answer 1

暂时考虑一下表格。垂直列全部与行对齐。这就是它成为一张桌子的原因。有些浏览器可能允许你使用单个表格单元格的大小，但我不会真的推荐它，因为外出可能是不可预测的。

我接近这个的方法是在单元格内部放置另一个元素但是围绕着你的内容。然后你可以调整其他元素的大小。

Answer 2

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

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

我真的会避免这种情况。如果您尝试为细胞内容添加区别，请使用颜色。字体大小和大小的变化更有可能弄乱显示器和用户界面，而不是对任何人的帮助。

Answer 3

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

Answer 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%');
        }


    }
);


}
);

调整对Html表格单元格的影响

4 个答案: