Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide table rows without resizing overall width?

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.

like image 536
Wilco Avatar asked Sep 29 '08 01:09

Wilco


People also ask

Can I hide rows in Word table?

Word tables don't offer the same functionality as an Excel workbook, but formatting the entire row as hidden does hide the entire row. As for going to a particular row, pressing Shift-F5 when you open a document (or after making an edit) should return you to the location of the last edit.

How do I reduce row width in a table?

Change row height, and then drag the boundary. To set the row height to a specific measurement, click a cell in the row that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want.

How do you hide a table overflow?

To use the CSS overflow property with its "hidden" value on the HTML <td> element, you need to set the table-layout property with the "fixed" value and an appropriate width on the <table> element. Then, you need to add the overflow property set to "hidden" and white-space property set to "nowrap" on the table cell.

Can we hide a table row in HTML?

A hidden attribute on a <tr> tag hides the table row. Although the table row is not visible, its position on the page is maintained.


1 Answers

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;
 }
like image 65
levik Avatar answered Oct 13 '22 13:10

levik