HTML 테이블 셀의 크기 조정 효과

Question

나는 jeed 도움말을 유용하게 사용합니다.

테이블 셀의 크기를 동적으로 조정할 수 있습니까? 크기를 조정하면 만 변경하면 나머지는 동일하게 유지됩니다.

Answer 1

잠시 동안 테이블에 대해 생각해보십시오. 세로 열은 모두 행처럼 정렬됩니다. 이것은 그것을 테이블로 만드는 것입니다. 일부 브라우저에서는 크기가 개인 테이블 셀을 사용하여 해킹을 허용 할 수도 있지만 예측할 수 없으므로 실제로 권장하지는 않습니다.

내가 접근하는 방법은 셀 안에 다른 요소가 있지만 콘텐츠를 둘러 쌀 수 있습니다. 그런 다음 다른 요소의 크기를 조정할 수 있습니다.

Answer 2

새로운 TD의 크기에 따라 나머지 TD의 크기를 계산 한 다음 모든 TD의 너비를 동시에 변경해야 할 수도 있습니다.

Answer 3

열 또는 행에서 하나의 셀 크기를 조정하면 필요에 따라 행과 열의 크기가 조정되어 해당 셀을 수용 할 수 있습니다. edeverett가 지적한 바와 같이, 그것은 테이블을 만드는 것의 일부입니다.

한 가지 방법은 rowspan="" 및 colspan="" 값을 변경하는 것이지만, 다른 셀을 조작해야 할 경우 문서에서 제거/숨기기를해야합니다. 그렇지 않으면 너무 많은 셀로 끝날 수 있습니다. 이상한 렌더링 문제가 발생합니다.

나는 이것을 정말로 피할 것이다. 셀 내용에 구별을 추가하려면 색상을 사용하십시오. 글꼴 크기와 크기를 변경하면 누구에게나 도움이되는 것보다 디스플레이와 UI가 엉망이 될 가능성이 큽니다.

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


    } 
); 


} 
);