CODEWITHSUNDEEP
jqueryhtmlcss
user146584
user146584

Reputation: 701

Resizing effect on Html Table cell

I neeed jQuery help.

He can we dynamically resize a table cell ?.If we resize it, change only affect that particular cell,rest should remain same.

Upvotes: 1

Views: 1996

Answers (4)

LCJ
LCJ

Reputation: 22652

Take a look at Adjusting HTML Table Cell Width using jQuery . With this approach all the rows of a particular column gets a particular size.

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


    }
);


}
);

Upvotes: -1

David Thomas
David Thomas

Reputation: 253308

If you resize one cell in a column, or row, the row and column will then, by necessity and design, resize to accommodate that cell. As noted by edeverett, that's part of what makes it a table.

One way to do it might involve changing the rowspan="" and colspan="" values, but if you do that you'll also have to manipulate other cells, to remove/hide them from the document otherwise you could end up with too many cells, causing weird rendering issues.

I really would avoid this. If you're trying to add distinction to the cell contents, use colour. Font size and changing size is more likely to mess up the display and UI than be a help to anyone.

Upvotes: 2

Makram Saleh
Makram Saleh

Reputation: 8701

You might need to calculate the size of the remaining TDs according to the new size, then change the width of all the TD simultaneously.

Upvotes: 0

edeverett
edeverett

Reputation: 8218

Think about tables for a moment. The vertical columns all align as do the rows. This is what makes it a table. Some browsers might allow you hack around with the size individual table cells, but I wouldn't really recommend it as the out come may well be unpredictable.

The way I would approach this would be to have another element inside the cell but surrounding your content. Then you can resize that other element.

Upvotes: 5

Related Questions