표 형식의 데이터를 표시하지만 동적 레이아웃이 있습니다. 사업부? 표?

사용자에게 일부 데이터를 표시해야한다는 요구 사항이 있습니다.표 형식의 데이터를 표시하지만 동적 레이아웃이 있습니다. 사업부? 표?

데이터는 "Label : InputForLabel"로 표시되며 두 개의 열을 갖습니다. 그것은 다음과 같습니다

enter image description here

난 그냥 모든 행에 대해 네 개의 열이있는 테이블을 사용하여 시작했다. 각 열의 너비는 25 %이고 테이블의 너비는 100 %입니다. 위의 그림과 같습니다.

.ContentTable { 
    width: 100%; 
} 

.ContentTable tr { 
    height: 18px; 
} 

.ContentTable tr td{ 
    width: 25%; 
}

이제 특정 항목과 레이블을 동적으로 제거 할 수있는 추가 요구 사항이 있습니다. 아이템/라벨을 숨기면 테이블에 틈이 생깁니다. 나는 항상 행당 2 개의 아이템/라벨을 표시하고 아이템/라벨이 숨겨지면서 모든 것을 위쪽으로 붕괴 시키려고합니다.

divs가 더 쉽게 할 수있는 것처럼 들리는가요? 또는 테이블 개체에 "각 행에 대해 항상이 열이 많이 있습니다. 열이 숨겨져 있으면 다음 행의 첫 번째 열을 위로 당기고 앞으로 모든 것을 슬라이드"라고 말할 수 있습니까?

출처

2012-10-12 Sean Anderson

마크 업을 생성합니까? 그렇다면이 정보는 실제로 표 형식의 데이터가 아니며 목록과 유사하므로 하나로서 취급해야합니다. 마크 업을 제어하는 경우 항목이 표시되거나 숨겨지면서 JS를 사용하여 열 (각 항목은 'div'와 같은 컨테이너 내에있을 수 있음)을 동적으로 채울 수 있습니다. – MasterAM

하나의 큰 표가 있으면 아무 소용이 없으므로 테이블로 만든 마크 업으로 유지하더라도 2 열로 나눠야합니다 (열 중 하나의 행 표시/숨기기에 문제가 있음) 사라짐 : o).

그런 다음 내용을 두 개의 열로 나누었을 때 테이블 레이아웃이 적합한 지 아닌지 질문 할 수 있습니다. MasterAM이 옳다고 생각하고 이런 종류의 레이아웃에 ul을 사용해보십시오. 목록의 요소 만 숨기면 테이블에있는 행만큼 쉽습니다.)

출처

2012-10-12 23:48:33 bperson

오, 이런. 매우 현명한! 늦은 금요일이지만 두 테이블을 사용하면 두 가지 테이블로 나누어서 문제가 발생하지 않는다는 사실을 완전히 깨닫습니다. 왜 모든 테이블을 사용합니까? 나는 그것을 조사 할 것이다. :) –

표 형식의 데이터를 표시하지만 동적 레이아웃이 있습니다. 사업부? 표?

답변

관련 문제