전체 폭을 크기를 조정하지 않고 테이블 행을 숨기는 방법은 무엇입니까?

Question

전체 테이블 너비에 영향을주지 않고 테이블 행을 숨길 수있는 방법이 있습니까? 테이블 행을 보여주는/숨기는 JavaScript가 있지만 행을 설정할 때 display: none;, 가시 행의 내용에 맞게 수축 된 테이블.

Answer 1

테이블의 전체 너비를 보존하려는 경우 행을 숨기기 전에 확인하고 너비 스타일 속성을이 값으로 명시 적으로 설정할 수 있습니다.

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

그러나 행을 숨길 때 개별 열이 반사 될 수 있습니다. 이것을 완화하는 가능한 방법은 테이블에 스타일을 추가하는 것입니다.

 table {
  table-layout: fixed;
 }

Answer 2

참고로 Levik의 솔루션은 완벽하게 작동합니다. 필자의 경우 jQuery를 사용하여 솔루션은 다음과 같습니다.

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

Answer 3

CSS 규칙 visibility: collapse 이를 위해 정확히 설계되었습니다.

tbody.collapsed > tr {
    visibility: collapse;
}

이 CSS를 추가 한 후 JS에서 가시성을 트리거 할 수 있습니다.

tbody.classList.toggle('collapsed');

Answer 4

CSS에서 table-layout: fixed; 테이블에서 브라우저에 높이와 너비에 지정된 크기를 존중하도록 지시합니다. 이것은 일반적으로 행과 열의 선호하는 크기에 대한 힌트를 제공하지 않는 한 브라우저의 자동 상환을 억제합니다.

Answer 5

순수한 HTML을 사용하여 수행 할 수 있습니다

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