동적으로 행을 추가 할 때 IE가 테이블 열 크기를 조정합니다.

각 행에 확장 세부 정보 행이있는 테이블을 만들고 싶습니다. 아래의 간단한 예제 코드를 참조하십시오. 표시되는 표의 행을 클릭하면 숨겨진 표의 해당 행이 복제되어 클릭 된 행 아래에 삽입되어 확장 된 행 효과가 만들어집니다. 두 번째 클릭하면 세부 정보 행이 삭제됩니다.동적으로 행을 추가 할 때 IE가 테이블 열 크기를 조정합니다.

문제는 IE8 (및 다른 버전)에서는 두 번째 또는 세 번째 행이 확장 될 때 열의 너비가 변경된다는 것입니다. 첫 번째 행은 그렇지 않습니다. 차이점은 세부 정보 행의 콘텐츠 길이입니다. Firefox 3.5에서 이와 동일한 예제를 보면, 디테일 컨텐츠의 길이에 관계없이 컬럼이 원래의 너비를 유지하고 있음을 알 수 있습니다. 왜 이런 일이 일어나고 어떻게 고칠 수 있습니까?

첨부 된 jQuery는 1.2.6이지만 효과는 버전에 관계없이 동일해야합니다. 두 번째 또는 세 번째 행은 확장

<html> 
<head> 
    <style type="text/css"> 
     table#primary { 
      width: 504px; 
      border-collapse: collapse; 
     } 
     table#primary, 
     table#primary tr, 
     table#primary th, 
     table#primary td, { 
      padding: 0; 
      margin: 0; 
     } 
     table#primary td { 
      border: 1px solid black; 
     } 
     td.time { 
      width: 100px; 
     } 
     td.title { 
      width: 300px; 
     } 
     td.room { 
      width: 100px; 
     } 
     table#secondary { 
      display: none; 
     } 
    </style> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("table#primary tr").click(function() { 
       toggleDetails($(this)); 
      }); 
     }); 

     function toggleDetails(row) { 
      if (row.hasClass("expanded")) { 
       hideDetails(row); 
      } else { 
       showDetails(row); 
      } 
     } 

     function showDetails(row) { 
      var id = row.attr("id"); 
      var detailsRow = $("tr#details_" + id).clone(true); 
      detailsRow.insertAfter(row); 
      row.addClass("expanded"); 
     } 

     function hideDetails(row) { 
      row.removeClass("expanded"); 
      row.next().remove(); 
     } 
    </script> 
</head> 
<body> 

<table id="primary"> 
    <thead> 
     <th>Time</th> 
     <th>Title</th> 
     <th>Room</th> 
    </thead> 
    <tbody> 
     <tr id="one"> 
      <td class="time">11:00 am</td> 
      <td class="title">First</td> 
      <td class="room">101A</td> 
     </tr> 
     <tr id="two"> 
      <td class="time">12:00 pm</td> 
      <td class="title">Second</td> 
      <td class="room">206A</td> 
     </tr> 
     <tr id="three"> 
      <td class="time">1:00 pm</td> 
      <td class="title">Third</td> 
      <td class="room">103B</td> 
     </tr> 
    </tbody> 
</table> 

<table id="secondary"> 
    <tbody> 
     <tr id="details_one"> 
      <td colspan="3">Lorem ipsum one. Lorem ipsum one.</td> 
     </tr> 
     <tr id="details_two"> 
      <td colspan="3">Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two.</td> 
     </tr> 
     <tr id="details_three"> 
      <td colspan="3">Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three.</td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

출처

2010-05-03 JavadocMD

, 열의 폭 변화.

실제로 너비를 존중하려면 table-layout: fixed이 <table>에 필요합니다. 그렇지 않다면 일반적으로 예측할 수없는 알고리즘 인 auto table layout 알고리즘을 사용하고 있습니다 (특히 colspan이 관련되어있을 때는 IE가 바람직하지 않습니다).

fixed table layout을 사용하면 테이블의 첫 번째 행에있는 셀에 명시적인 너비를 설정하거나 더 좋게는 <col> 요소에 설정합니다. 그리고 그들은 실제로 붙들고 있습니다. 더 빨리 렌더링됩니다.

출처

2010-05-03 23:36:56 bobince

예, 훌륭합니다. 빠른 답장을 보내 주셔서 감사합니다. – JavadocMD

동적으로 행을 추가 할 때 IE가 테이블 열 크기를 조정합니다.

답변

관련 문제