Wie Tabellenzeilen ohne Ändern der Größe Baubreite zu verbergen?

Question

Gibt es eine Möglichkeit Tabellenzeilen zu verbergen, ohne die gesamte Tischbreite zu beeinflussen? Ich habe einige Javascript bekam, dass einige Tabellenzeilen zeigt / versteckt, aber wenn die Zeilen eingestellt sind display: none;, die Tabelle mit schrumpft der Inhalt der sichtbaren Zeilen passen.

Answer 1

Wenn Sie schauen, um die Gesamtbreite der Tabelle zu erhalten, Sie können es vor, eine Zeile zu verstecken, und legen Sie explizit die Breite style-Eigenschaft auf diesen Wert:

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

Dies kann jedoch die einzelnen Spalten verursachen aufzuschmelzen, wenn Sie die Zeile verbergen. Eine Möglichkeit, dies zu mildern ist durch einen Stil zu Ihrer Tabelle hinzufügen:

 table {
  table-layout: fixed;
 }

Answer 2

Als Referenz Levik-Lösung funktioniert perfekt. In meinem Fall mit jQuery, sah die Lösung in etwa so:

$('#tableId').width($('#tableId').width());

Answer 3

CSS-Regel visibility: collapse wurde genau die für das.

tbody.collapsed > tr {
    visibility: collapse;
}

Dieses CSS Nach dem Hinzufügen Sie können Sie die Sichtbarkeit von JS auslösen mit:

tbody.classList.toggle('collapsed');

Answer 4

In CSS table-layout: fixed; auf dem Tisch weist den Browser, um die Größen zu ehren Sie für Höhen und Breiten angegeben haben. Diese in der Regel unterdrückt durch den Browser Auto-Größenanpassung, wenn Sie keine Hinweise auf die bevorzugten Größen Ihrer Zeilen und Spalten gegeben haben.

Answer 5

Sie können es reine HTML mit

<table border="1">
<colgroup>
    <col width="150px" />
    <col width="10px"  />
    <col width="220px" />
</colgroup>
<tr>
    <td valign="top">1</td>
    <td> </td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
</tr>
</table>