Изменение размера изображения на Html Стол-ячейка

Question

I neeed jQuery help.

Он может динамически изменять размер ячейки таблицы. Если мы изменим ее размер, измените значение , это повлияет только на эту конкретную ячейку, остальное останется таким же.

Answer 1

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

Способ, которым я хотел бы подойти, состоял в том, чтобы иметь другой элемент внутри ячейки, но окружающий ваш контент. Затем вы можете изменить размер этого другого элемента.

Answer 2

Возможно, вам потребуется рассчитать размер оставшихся TDs в соответствии с новым размером, а затем изменить ширину всего TD одновременно.

Answer 3

Если вы измените размер одной ячейки в столбце или строке, то строка и столбец будут по необходимости и дизайну изменять размер для размещения этой ячейки. Как отметил Эверететт, это часть того, что делает его столом.

Один из способов сделать это может включать изменение значений rowspan="" и colspan="", но если вы делаете, что вы также должны манипулировать другие клетки, чтобы удалить/скрыть их из документа, в противном случае вы могли бы в конечном итоге слишком много клеток , вызывая странные проблемы с рендерингом.

Я действительно избежал бы этого. Если вы пытаетесь добавить различие в содержимое ячейки, используйте цвет. Размер шрифта и изменяющийся размер, скорее всего, испортят дисплей и пользовательский интерфейс, а не помогают кому-либо.

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


    } 
); 


} 
);