송민준의 개발노트

bootstrap 4 table columns(열) 없애기(숨기기) 본문

웹/부트스트랩

bootstrap 4 table columns(열) 없애기(숨기기)

송민준 2020. 1. 12. 22:17

테이블 반응형은 항상 고민이다.

 

테이블의 th, td의 경우 다음과 같이 적용해야 한다.

d-none .d-{breakpoint}-{value}

breakpoint : sm, md, lg, xl

value : block, table-cell 등등등

 

사용 예제 

			<thead>
				<tr>
					<th class ="d-none d-lg-table-cell" width="7%"><div>번호</div></th>
					<th width="45%"><div>제목_댓글</div></th>
					<th width="15%"><div>작성자</div></th>
					<th class ="d-none d-sm-table-cell" width="13%"><div>작성일</div></th>
					<th class ="d-none d-sm-table-cell" width="10%"><div>조회</div></th>
					<th class ="d-none d-sm-table-cell" width="10%"><div>추천</div></th>
				</tr>
			</thead>

 

' > 부트스트랩' 카테고리의 다른 글

bootstrap 활용 1  (0) 2019.10.30