반응형 테이블 디자인

Oracle Content Management는 모바일 장치에 표시될 때 행 데이터가 누적되도록 하는 단락 구성요소 내 반응형 테이블의 CSS 예를 제공합니다.

반응형 테이블은 화면 크기에 따라 효과적으로 콘텐츠가 표시되도록 테이블을 조정합니다. 예를 들어, 5열 테이블은 웹 페이지에서 가로로 잘 표시될 수 있지만, 전화에서 표시될 때는 데이터가 누적형으로 제공되는 것이 효과적일 수 있습니다. 반응형 테이블이 올바르게 작동하려면 머리글 행이 필요합니다. 가로 및 세로로 표시되는 웹 사이트

다음과 같이 생성된 HTML에서는 값이 열 머리글 텍스트와 일치하는 각 테이블 셀에 추가된 data-label 속성이 있습니다.

<thead>
    <tr>
        <th scope="col">ACCOUNT</th>
        <th scope="col">DUE DATE</th>
        <th scope="col">AMOUNT</th>
        <th scope="col">MINIMUM</th>
        <th scope="col">PERIOD</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="ACCOUNT">Visa</td>
        <td data-label="DUE DATE">04/16/2020</td>
        <td data-label="AMOUNT">$3,090</td>
        <td data-label="PERIOD">03/09/2020 - 04/08/2020</td>
    </tr>

속성이 각 셀에 있을 경우 아래 CSS 규칙을 적용할 때 TD는 서로의 위에 누적됩니다.

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

아래 매체 규칙은 화면 크기를 질의하며 화면 크기가 767픽셀 미만인 경우에만 적용됩니다.

@media screen and (max-width: 767px) {

CSS를 사용하여 삽입된 테이블이 반응형 테이블이 되도록 허용하는 코드 예는 제공된 StarterTheme의 기본 design.css에 있습니다. StarterTheme에서 사이트를 구축하는 경우 단락 슬롯에 삽입되는 테이블이 기본적으로 반응형 테이블로 설정됩니다. 테이블을 삽입하려면 다음과 같이 하십시오.

Oracle Content Management에서 사이트를 열고 편집 모드로 토글합니다.
새 업데이트를 생성하거나 기존 업데이트를 선택하여 수정합니다.
새 단락 구성요소를 페이지로 끌어와서 테이블을 삽입하려는 위치를 누르거나, 테이블을 삽입하려는 기존 단락을 누릅니다.
서식 있는 텍스트 도구모음에서 을 누르고 테이블 속성을 설정합니다. 첫번째 행을 머리글로 선택하고, 사용이 예상되는 가장 작은 화면에서도 효과적으로 작동하도록 테이블 너비를 조정해야 합니다. 예를 들어, 전화에서 사이트를 표시해야 할 경우 기본 너비인 767픽셀은 너무 넓어서 전화 화면에서 완전히 표시되지 않을 수 있습니다. 테이블 너비를 보다 작은 크기(예: 300픽셀)로 설정하거나 너비를 100%로 설정하는 것이 좋습니다.

완료되면 보기 모드로 다시 토글하고 화면 너비가 767픽셀 미만인 보기 옵션을 선택하여 결과 미리보기를 수행합니다. 편집 모드에서는 테이블의 반응형 작동이 지원되지 않으므로 보기 모드여야 합니다.

보기 모드 사이트 미리보기

다른 테마에서 사이트를 구축할 때 반응형 테이블을 사용하려면 StarterTheme design.css의 코드를 사용하려는 테마의 design.css 파일에 복사해야 합니다.

StarterTheme design.css의 코드를 복사하려면 Oracle Content Management의 측면 탐색에서 개발자를 누릅니다.
모든 테마 보기를 누릅니다.
StarterTheme를 선택하고 열기를 누릅니다.
디자인을 눌러 폴더를 열고 기본값을 누릅니다.
StarterTheme에서 design.css 파일을 선택하고 다운로드를 누릅니다.
텍스트 편집기에서 파일을 열고 An example CSS of how to render a table responsively 주석으로 시작되는 파일의 섹션을 찾습니다.

다음 주석까지 코드를 선택하여 복사합니다.

/**
 * An example CSS of how to render a table responsively.
 * It enables stacking of row data on mobile devices.
 * Only do this for view mode (not for edit mode).
 *
 * On each cell rendered, it adds a user-defined attribute 
 * 'data-label' with value matching the column header text.
 */
 @media screen and (max-width: 767px) {
  .scs-paragraph:not(.scs-paragraph-edit) table {
    border: 0;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table caption {
    font-size: 1.3em;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td:last-child {
    border-bottom: 0;
  }
}

단계를 반복하여 수정할 템플리트의 design.css 파일을 다운로드하고 템플리트를 연 다음 복사된 코드를 파일에 붙여 넣습니다.
변경사항을 저장하고 수정된 design.css 파일을 수정하려는 테마에 새 개정으로 업로드합니다.