Aspro에서는 다음으로 버전 1.1.7부터 테이블을 다음과 같이 조정할 수 있습니다. 모바일 버전. 다음 사항에 대한 변경이 필요합니다. 원천페이지 - 테이블의 적응성을 담당하는 클래스를 추가합니다.

모바일 버전의 간단한 표는 페이지를 넘어갑니다.

테이블을 반응형으로 만들려면 테이블이 추가된 페이지 편집으로 이동하세요. 그런 다음 소스 코드 편집 모드로 이동합니다.

여는 태그 앞

class 에 태그를 추가하세요.

닫는 태그 뒤에

태그를 입력하세요.

...

변경 사항을 저장합니다.

이제 테이블이 스크롤되고 프레임을 벗어나지 않습니다.

가로로 스크롤하면 표가 프레임 밖으로 넘어가지 않는데, 모바일 버전에서는 오른쪽으로 스크롤하면 사이드 메뉴가 열린다. 메뉴가 테이블 작업을 방해하지 않도록 하려면 페이지 코드를 변경해야 합니다.

앞서 추가한 태그에 "swipeignore" 클래스를 추가해야 합니다. 결과적으로 태그 이전에

클래스가 포함된 태그를 지정해야 합니다.

...

변경 사항을 저장합니다.

이제 테이블을 오른쪽으로 스크롤하면 사이드 메뉴가 열리지 않아 테이블 작업에 방해가 되었습니다.

오른쪽으로 스크롤하거나 다른 페이지에서 사이드 메뉴를 숨길 수 있습니다. 사이드 메뉴 표시를 제거하려는 블록 태그에 "swipeignore" 클래스를 추가해야 합니다. 태그에 클래스가 지정되지 않은 경우 형식은 입니다. 태그에 이미 클래스가 추가된 경우 공백으로 구분하여 "swipeignore"를 작성합니다(예: ).

사이트에서 테이블을 사용하는 경우에도 테이블을 조정해야 합니다. 모바일 장치. 압축 및 단어 줄 바꿈 + 한 열에 테이블 정렬이라는 두 가지 적응 옵션을 사용합니다.

첫 번째 옵션은 모든 다중 열 테이블에 적합하고, 저는 프런트엔드의 일부 사이트에서 두 번째 옵션을 사용합니다. 메뉴를 표 형태로 표시하는 데는 이 같은 약점이 있는데, 해상도를 낮추면 너무 압축돼 사용자들의 분노를 자아낸다. 한 열에 저해상도로 번역 - 좋은 결정하지만 다시 말하지만 모든 테이블에 사용하면 안 됩니다.

기본옵션

따라서 사이트의 대부분의 테이블에 대해 다음 CSS 코드를 사용합니다.

@미디어 화면 및 (최대 너비:1000px)(td(word-break:break-all;)

블록에 맞지 않는 단어는 1000px 미만의 해상도로 시작해야 함을 지정합니다. 새 줄. 해상도 1000이 예입니다. 사이트를 살펴보세요. 어떤 경우에는 해상도를 더 낮게 설정하는 것이 합리적입니다.

성취하다 좋은 디스플레이 CSS에서 이중 코드를 사용하면 테이블이 가능합니다. 나는 병렬로 사용합니다 :

@media 화면 및 (최대 너비:700px)(img(최대 너비:96% !important;height:auto !important;) iframe, 텍스트 영역, 입력, 버튼, 제출, 비디오, 개체, 포함(최대 너비: 99% !중요;) 테이블, 범위, div, ins(최대 너비:100% !중요;)

700px 미만의 해상도에서는 테이블이 100% 크기로 표시됩니다. 즉, 압축되지만 너비는 전체 블록을 차지합니다. !important 속성은 700px보다 작은 모든 해상도에 적용됨을 나타냅니다.

한 열의 적응

낮은 해상도에서 한 열에 표시되도록 테이블을 조정하는 것이 더 어렵습니다. 모든 테이블에 적합하지는 않지만 종종 필요한 경우가 있습니다. 먼저 테이블의 원래 클래스를 지정합니다. 예를 들면 다음과 같습니다.