부트스트랩 테이블 예제

기본 클래스 .table을 추가한 다음 사용자 지정 메서드 또는 다양한 통합 된 수정자 클래스로 확장하십시오. 완전히 코딩된 테이블을 만들기 위한 대화형 도구입니다. 모든 중단점에서 가로 스크롤 테이블에 .table 응답식을 사용합니다. 마찬가지로 .thead-dark 클래스를 사용하여 어두운 머리가 있는 테이블을 만들 수 있습니다. .table 요소에서 .table 경계가 없는 클래스를 사용하여 테두리 없는 테이블을 만들 수도 있습니다. 이는 :n번째 자식 CSS 선택기를 통해

요소 내의 테이블 행에 배경 색을 추가하여 달성됩니다. 다음은 .table 응답 클래스가 응답 형 테이블을 만듭니다. 그런 다음 테이블은 작은 장치(768px 미만)에서 가로로 스크롤됩니다. 768px 너비보다 큰 것을 볼 때 차이가 없습니다: 마찬가지로 다음 예제와 같이 테이블에 추가 클래스 .table-dark를 추가하는 제거된 테이블의 반전 되거나 어두운 버전을 만들 수도 있습니다. 테이블에 얼룩말 줄무늬: 반응형 스타일이 특정 뷰포트 너비에 적용될 때까지 이러한 테이블이 끊어질 수 있습니다.

컨텍스트 클래스는 테이블 행(

) 또는 테이블 셀(

)에 색상을 지정하는 데 사용할 수 있습니다: DataTable의 부트스트랩 통합은 DataTable에서 페이지 조정 컨트롤에 대한 렌더러를 제공하여 테이블의 페이지 지정도 부트스트랩에 의해 일관되게 스타일지정되도록 합니다. .table 응답형{-sm |-md|-lg|-xl}를 사용하여 필요에 따라 특정 중단점까지 반응형 테이블을 만듭니다. 해당 중단점부터 위로 테이블이 정상적으로 작동하지 않고 가로로 스크롤되지 않습니다. 테이블 편집을 사용하면 테이블 내의 기존 데이터를 편집하고 테이블에 새 데이터를 추가할 수 있습니다. 그룹 기능에 대한 행&col 범위로 테이블을 사용자 지정하려면 HTML 테이블의 자습서를 참조하여 테이블에 대해 자세히 알아봅니다. 표준 테이블의 가능성을 향상 가장 인기있는 플러그인MDBootstrap 통합. 모든 테이블 클래스에 대한 전체 참조를 보려면 전체 부트스트랩 테이블 참조로 이동하십시오. 테두리가 없는 테이블에 대해 .table 경계 없는 클래스를 추가합니다. .table 응답형 {-sm|-md|-lg|-xl}으로 .table을 래핑하여 응답형 테이블을 만들고, 테이블이 최대 576px, 768px, 992px 및 1120px의 각 최대 너비 중단점에서 가로로 스크롤하도록 합니다.

이 구성 요소를 사용하면 .table 기본 클래스에 부트스트랩의 클래스 .table 스트라이프를 추가하기만 하면 테이블의 어느 곳에서나 고유한 클래스 또는 스타일을 추가할 수 있습니다. MDBootstrap 검색 상자는 테이블의 모든 데이터 중에서 초고속 검색할 수 있습니다. 또한 .table 기본 클래스에 추가 클래스 .table-sm을 추가하여 테이블을 더 작게 만들고 공간을 절약할 수 있습니다. 클래스 .table-sm은 셀 패딩을 반으로 절단하여 테이블을 컴팩트하게 만듭니다. 다음은 작은 테이블의 예입니다: 셀 편집에 대한 편집 유형 또는 유효성 검사를 표시하는 몇 가지 예가 있습니다. 이 예제에서는 가장 기본적인 테이블 태그를 사용 하 여이 작업을 수행 하는 방법을 보여 줍니다.테이블 기반 테이블 부트 스트랩에서 어떻게 보이는지 는 다음과 같습니다. 모든 테이블 스타일은 부트스트랩 4에서 상속되므로 중첩된 테이블은 부모와 동일한 방식으로 스타일이 지정됩니다. .table-hover 클래스는 테이블 행에 호버 효과(회색 배경 색)를 추가합니다: 테이블이 너무 길거나 너무 넓은 경우 크기를 제한하고 스크롤 기능을 활성화할 수 있습니다. 부트스트랩 테이블은 응답성 및 테이블 스타일을 조작할 수 있는 가능성과 같은 추가 이점을 제공합니다.

부트스트랩의 클래스 .table을

요소에 추가하기만 하면 가로 분할기와 작은 셀 패딩(기본적으로 8px)이 있는 기본 스타일이 있는 테이블을 만들 수 있습니다. 테이블에 대한 가져오기 기능입니다. 이 예제에서는 실제로 사용 하는 방법을 보여 줍니다 react-bootstrap 테이블에 대 한 기본 사용, 세로 및 가로 스크롤 예제 .table 응답 에 모든 .table을 래핑 하 여 응답 테이블 만들기 작은 장치에서 가로로 스크롤 되도록 (아래) 768px).

Share on FacebookPin on PinterestTweet about this on TwitterShare on TumblrShare on Google+Digg this