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。否则，你会受到auto table layout算法的摆布，这种算法通常是不可预知的（特别是当涉及到colspan时，在IE中会变得不可靠）。

使用fixed table layout您可以在表格第一行的单元格上设置显式宽度，或者在<col>元素上设置更好的宽度。他们实际上坚持。加上它渲染更快。

来源

2010-05-03 23:36:56 bobince

是的，辉煌的，谢谢你的快速回复！ – JavadocMD 2010-05-03 23:41:58

IE在动态添加行时调整表列的大小

回答

相关问题