HTML 요소의 스타일을 지정하기 위한 여러 CSS 속성이 있습니다. “ 표시하다 ” 속성도 그 중 하나로 인라인 요소나 블록 요소로 관리되는 요소를 설정하는데 활용된다. 또한 플로우, 플렉스 또는 그리드와 같은 하위 요소에 사용되는 레이아웃입니다. 또한 이 속성은 요소를 표시하기 위해 내부 및 외부 유형을 할당합니다.
이 게시물은 다음을 설명합니다.
CSS에서 'display: table-cell'을 사용하는 방법은 무엇입니까?
'를 사용하려면 표시하다 ' 값이 '인 속성 테이블 셀 ”, 주어진 지침을 시도하십시오.
1단계: 중첩된 div 컨테이너 만들기
먼저 “ <사업부> ” 태그를 추가하고 “ ID div 태그 내부의 속성. 그런 다음 div 태그 사이에 더 많은 컨테이너를 추가하고 ' 수업 ” 각 div의 속성:
< 사업부 ID = '테이블 내용' >
< 사업부 수업 = 'tr-div' >
< 사업부 수업 = 'td-div' > 괴롭히다 사업부 >
< 사업부 수업 = 'td-div' > HTML / CSS 사업부 >
사업부 >
< 사업부 수업 = 'tr-div' >
< 사업부 수업 = 'td-div' > 에드워드 사업부 >
< 사업부 수업 = 'td-div' > 도커 사업부 >
사업부 >
< 사업부 수업 = 'tr-div' >
< 사업부 수업 = 'td-div' > 잭 사업부 >
< 사업부 수업 = 'td-div' > 힘내 사업부 >
사업부 >
사업부 >
데이터가 성공적으로 추가되었음을 알 수 있습니다.
2단계: 'table-content' 컨테이너 스타일 지정
기본 div에 액세스하려면 ' #테이블 콘텐츠 ', 어디 ' # '는 지정된 '에 액세스하는 데 사용되는 선택기입니다. ID div 컨테이너의 속성입니다. 그런 다음 다음 속성을 적용합니다.
#테이블 콘텐츠{디스플레이: 테이블;
패딩: 7px;
}
여기:
-
- “ 표시하다 ” 속성은 요소의 모양을 정의하고 결정합니다. 이를 위해 이 속성의 값을 ' 테이블 ” 테이블을 만들기 위해.
- “ 심 ”는 컨테이너 내부의 공간을 할당합니다.
3단계: 'tr-div' 컨테이너 스타일 지정
이제 ' tr-div ” 컨테이너는 다음과 같습니다.
.tr-div {디스플레이: 테이블 행;
배경색: rgb ( 164 , 241 , 215 ) ;
패딩: 7px;
}
위의 코드 블록에 따르면 ' 표시하다 ' 속성 값은 '로 설정됩니다. 테이블 행 ”는 데이터가 테이블의 행 형태로 설정됨을 의미하며, “ 배경색 ” 속성은 요소의 뒷면에 색상을 지정하기 위해 활용되며, 마지막으로 “ 심 ' 은 적용되다:
4단계: 'td-div' 컨테이너에 'display: table-cell' 속성 적용
디스플레이: 테이블 셀;
폭: 150px;
국경: #0f4bf0 솔리드 1px;
여백: 5px;
패딩: 7px;
}
'의 도움으로 세 번째 div에 액세스합니다. .td-div ” 점 선택 및 해당 ID를 선택하고 아래에 제공된 CSS 속성을 적용합니다.
-
- '의 가치 표시하다 ” 속성이 “로 설정됩니다. 테이블 셀 ”는 셀을 만들고 셀에 데이터를 추가하는 데 활용됩니다.
- “ 너비 ”는 표 셀의 가로 크기를 지정합니다.
- “ 국경 ”는 셀 주변의 경계를 정의합니다.
- “ 여유 ” 속성은 정의된 테두리 외부에 공간을 할당합니다.
- “ 심 ”는 경계 내부의 공간을 지정합니다.
산출
CSS에서 'display: table-cell'을 사용하는 이유는 무엇입니까?
“ 디스플레이: 테이블 셀 ” CSS 속성은 요소가 테이블처럼 동작하도록 데이터로 표시를 설정하는 데 사용됩니다. 따라서 사용자는 테이블 요소와 td 및 tr을 포함한 다른 요소를 사용하지 않고 HTML에서 테이블의 복제본을 만들 수 있습니다. 보다 구체적으로 그의 속성은 데이터를 테이블 형태로 정의합니다.
결론
'를 사용하려면 디스플레이: 테이블 셀 ” CSS 속성, 중첩된 div 컨테이너를 만들고 특정 이름을 가진 각 컨테이너에 클래스를 삽입합니다. 그런 다음 CSS에서 div 컨테이너에 액세스하고 'display: table-cell' 속성을 적용합니다. 표시하다 ” 속성은 테이블 셀에 데이터를 설정하는 데 사용됩니다. 이 게시물은 display:table-cell CSS 속성을 활용하는 방법을 시연했습니다.