如何在不调整整体宽度的情况下隐藏表格行？ [英] How to hide table rows without resizing overall width?

问题描述

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

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.

推荐答案

如果您希望保留表格的整体宽度，可以在隐藏行之前进行检查，并将width style属性显式设置为此值：

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屋！