隐藏表行，而不调整整个宽度 [英] Hiding table rows without resizing overall width

问题描述

有没有办法隐藏表行而不影响整个表格宽度？我有一些javascript显示/隐藏一些表行，但是当行设置为 display：none; 时，表缩小以适应可见

解决方案

如果要保留表格的整体宽度，可以先隐藏一行，并明确将width style属性设置为此值：

  table.style.width = table.clientWidth +px 
 table.rows [3] .style.display =none; 
  

但是，当您隐藏行时，这可能会导致单独的列重排。可以通过向表中添加样式来减轻这种情况：

  table {
 table-layout：fixed ; 
} 
  

Is there a way to hide table rows without affecting the overall table width? I've got some javascript that shows/hides some table rows, but when the rows are set to display: none;, the table with shrinks to fit the contents of the visible rows.

解决方案

If you are looking to preserve the overall width of the table, you can check it prior to hiding a row, and explicitly set the width style property to this value:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

However, this may cause the individual columns to reflow when you hide the row. A possible way to mitigate this is by adding a style to your table:

 table {
  table-layout: fixed;
 }

这篇关于隐藏表行，而不调整整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！