Elementor에서 반응형 테이블을 만드는 방법(3가지 방법)

주요 시사점

• Elementor 반응형 테이블은 전화기의 세 가지 패턴 중 하나를 사용합니다: 카드로 쌓인 행, 테이블 자체 상자 안의 옆으로 스크롤 또는 더 적은 열.
• 5 열 테이블은 읽을 수 있도록 약 640px의 너비가 필요하며 대부분의 전화기는 360px에서 430px 사이를 표시하므로 패턴을 선택하지 않으면 넓은 테이블이 오버플로됩니다.
• Master Addons Dynamic Table 위젯은 Responsive Table?이 켜져 있을 때 최대 768px 너비의 장치에서 모든 행을 카드에 쌓습니다. 기본값은 켜져 있습니다.
• 가로 스크롤은 두 개의 CSS 규칙을 취합니다: 오버플로-x는 래퍼에서 auto로 설정되고 그 안에 있는 테이블에서는 min-width가 설정됩니다.
• TablePress 는 각 테이블의 설정에 가로 스크롤 체크 박스가 있으며 기본적으로 꺼져 있습니다.

Elementor 응답 테이블은 휴대폰에서 계속 읽을 수 있는 테이블이며,테이블은 혼자서 그렇게 하지 않습니다. 열은 휴대폰이 가진 것보다 더 넓은 너비가 필요하므로 테이블은 일반적으로 화면 오른쪽에서 튀어나옵니다.

대처하는 방법은 세 가지가 있습니다. 우리는 세 가지를 모두 Elementor 4,3 에 구축했고 390px 와이드 폰 화면에서 확인했습니다.

모바일에서 테이블이 깨지는 이유

테이블은 Elementor 컨테이너 행이 할 수있는 방식으로 열을 감쌀 수 없습니다. 모든 열은 다른 열 옆에 앉아야하며 각 열은 가장 긴 단어를위한 공간이 필요합니다. 우리의 5 열 배송 테이블은 약 640px 로 편안합니다. 390px 전화에서 브라우저는 단어가 세 줄 깊이로 쌓일 때까지 열을 짜낸 다음 마지막 열이 가장자리에서 떨어집니다.

Elementor 의 자체 반응형 컨트롤은 여기서 큰 도움이 되지 않습니다. 장치당 전체 위젯을 숨기거나 너비를 변경할 수 있지만 테이블 내부에 도달하여 셀을 재배열할 수는 없습니다.

세 가지 반응형 테이블 패턴

각 패턴에는 비용이 있습니다.

패턴 1: 행을 카드에 쌓습니다

스태킹은 각 행을 작은 카드로 바꿉니다. 헤더 행이 사라지고 모든 셀에 열 이름이 레이블로 표시됩니다. 아무것도 숨겨지지 않고 아무도 옆으로 스크롤하지 않으므로 가장 안전한 기본값입니다.

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 동적 테이블 위젯은 하나의 스위치로 이 작업을 수행합니다.

1. Elementor 에서 동적 테이블 위젯을 선택합니다.
2. 콘텐츠 탭에서 엽니다 설정.
3. 떠나다 반응형 테이블? 예 로 설정합니다. 기본적으로 켜져 있습니다.
4. 전화기에서 페이지를 엽니다. 최대 768px 너비의 장치에서 행 스택.

스태킹 규칙은 장치 너비를 확인하므로 데스크톱 브라우저 창을 축소해도 트리거되지 않습니다. 실제 휴대폰이나 장치 에뮬레이션으로 테스트합니다. 스타일 탭에서 큰 셀 패딩을 설정한 경우 레이블과 값이 휴대폰에서 너무 가깝게 위치하지 않는지 확인합니다.

CSS 없이 스택되는 테이블을 원하십니까? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 동적 테이블 위젯 처음부터 반응형 테이블 스위치를 켜 놓았습니다.

패턴 2: 가로 스크롤

가로 스크롤은 테이블을 그대로 유지하고 방문자가 자신의 상자 안에서 옆으로 쓸어 넘길 수 있도록 합니다. 페이지 자체는 옆으로 스크롤되지 않습니다. 사람들이 가격 비교와 같이 열을 읽어야 할 때 사용하십시오.

Elementor 의 HTML 위젯에 있는 HTML 테이블의 경우,div 로 테이블을 감싸고 두 개의 규칙을 추가합니다:

<div class="table-scroll">
  <table class="wide-table">
    ...
  </table>
</div>

<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X min-width 브라우저가 열을 분쇄하는 것을 중지합니다 overflow-x: auto 화면이 그보다 좁은 경우에만 스크롤을 추가합니다. 셀당 한 줄에 테이블이 머물기 위해 필요한 너비로 640px 를 변경합니다.

약점은 방문자에게 오른쪽에 더 많은 것이 있다는 것을 알려주는 것은 아무것도 없다는 것입니다. 스크린 샷에서와 같이 반으로 자른 열은 줄 수있는 가장 좋은 힌트이므로 min-width 를 열 가장자리에서 정확히 끝나는 값으로 설정하지 마십시오.

패턴 3: 열 숨기기

때로는 열이 바탕 화면에 있고 전화에 불필요하게 좋은 것입니다. 중단점 아래에 숨기면 다른 변경 사항없이 테이블이 맞을 수 있습니다.

모든 클래스에 클래스를 추가합니다 th 그리고 td 열에서 잃을 수 있습니다, 다음 작은 화면에 해당 클래스를 숨깁니다:

<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>

<style>
@media (max-width: 767px) {
  .hide-cols .hide-mobile { display: none; }
}
</style>

여기 hide-cols 는 테이블 자체의 클래스입니다. 767px 는 Elementor 의 기본 모바일 중단점이므로 열이 태블릿으로 돌아옵니다.

전화 방문자가없이 할 수있는 것만 숨기십시오. 숨겨진 열이 누군가가 구매할지 여부를 결정하면 스태킹 또는 스크롤을 사용하십시오.

Elementor의 반응형 TablePress 테이블

Elementor 에 배치된 TablePress 테이블은 다른 테이블처럼 동작합니다: 넓은 테이블이 오버플로됩니다. 수정 사항은 TablePress 설정에 있습니다.

1. 로 이동 테이블프레스 그리고 테이블을 편집합니다.
2. 로 스크롤 사이트 방문자를 위한 테이블 기능.
3. 틱 수평 스크롤. 기본적으로 꺼져 있습니다.
4. 클릭 변경 사항 저장.

우리의 테스트에서 이것은 오버플로를 수정했습니다: 테이블이 상자 안에서 스크롤되고 페이지가 가만히 있었습니다. TablePress 는 또한 전화기에 대한 스태킹 및 축소 모드를 가지고 있으며,그것들은 유료 응답 테이블 기능의 일부입니다.

빠른 모바일 체크리스트

• 실제 전화에서 페이지를 엽니다. 에뮬레이터는 터치 스크롤과 일부 장치 너비 규칙을 놓칩니다.
• 페이지를 옆으로 스크롤합니다. 전체 페이지가 이동하면 테이블이 넘쳐납니다.
• 헤더 텍스트를 짧게 유지하십시오. “Free over”는 “Free delivery on orders over”보다 잘 감싸줍니다.
• 가장 중요한 열을 먼저 넣습니다. 테이블이 스크롤될 때 계속 보이는 열입니다.
• 셀에서 16px 본문 텍스트를 목표로 합니다. 테이블에 맞게 글꼴을 축소하면 읽을 수 없습니다.

자주 묻는 질문

최종 생각

To make an Elementor responsive table, decide what a phone visitor needs from it. Stack rows when each row is read alone, scroll when columns are compared, and hide columns only when the data is optional.

If you would rather not write CSS, 동적 테이블 handles the stacking pattern from a switch in the panel.

관련 읽기

• Elementor 에서 테이블을 만드는 방법 (4 가지 방법)
• Best Elementor table plugins and widgets compared
• Custom CSS extension for Elementor