Web/Bootstrap

Bootstrap 4 Display 유틸리티 - table columns 을 hide 처리하기

saltdoll 2018. 11. 30. 07:40
반응형

Bootstrap 4을 사용을 시도해 보고 있는데,

Utilites > Dispaly 를 이용해서, responsive display의 hide 처리를 할 수 있는 propety가 있어서,
<table>태그에 <th>,<td>에 .d-lg-block을 사용해 보려고 했답니다.


[ .d-none .d-lg-block 을 사용 했을때, 테이블 깨지는 현상 발생 ]

테이블에 사용할때면, 이상하게 컬럼이 밀리고 깨는지는 형상이 났습니다.

(원인은, .d-lg-block을 줬던 부분의 객체가 block형태로 변화되어서, 라인전체를 차지하려고 하기에 발생하는 현상입니다.)



알고 보니. d-lg-block은 block/inline 타입인 <div>, <span>과 같은 요소에서만 사용을 하였더군요.

(참고: https://getbootstrap.com/docs/4.1/utilities/display/#notation )


테이블의 th, td의 경우는 다음과 같이 사용해야 합니다. (이걸 몰라, 몇일을 고생했네요. ㅠ_ㅠ;;)

.d-none .d-sm-table-cell


d-{breakpoint}-{value}

breakpoint: sm, md, lg, xl

value: block, table-cell 등



Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for smmdlg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens. 


참고: https://stackoverflow.com/questions/48292516/hide-table-columns-using-bootstrap-4

참고2: (한글) https://code.i-harness.com/ko/docs/bootstrap~4/utilities/display/index





반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)