Responsiv tabellutforming

Oracle Content Management har et eksempel-CSS på en responsiv tabell i en avsnittskomponent som aktiverer stabling av raddata når de vises på mobile enheter.

En responsiv tabell justerer tabellen slik at den viser innhold som er avhengig av størrelsen på skjermen. En tabell med 5 kolonner kan fint vises vannrett, men når den vises på en telefon, kan det være at dataene presenteres bedre som stablet. Vær oppmerksom på at responsive tabeller trenger en topprad hvis de skal fungere på riktig måte.

I følgende genererte HTML ser du at det finnes et tilføyd dataetikettattributt for hver tabellcelle med verdier som samsvarer med kolonnens topptekst.

<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>

Når dette attributtet er på hver celle, stables TD-ene over hverandre når du bruker CSS-reglene nedenfor.

  .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;
  }

Vær oppmerksom på at medieregelen nedenfor utfører spørringer om skjermstørrelsen, og den blir bare aktiv når skjermstørrelsen er mindre enn 767 piksler:

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

Kodeeksemplet på bruk av css slik at innsatte tabeller kan være responsive, finnes i standard design.css for det angitte StarterTheme. Hvis du bygger et tema fra StarterTheme, vil tabellene som settes inn i et avsnitt, bli responsive som standard. Slik setter du inn en tabell:

1. Åpne et område i Oracle Content Management, og aktiver/deaktiver modusen Rediger.
2. Opprett en ny oppdatering eller bruk en eksisterende oppdatering som skal endres.
3. Dra en ny avsnittskomponent til siden og klikk der du vil sette inn en tabell, eller klikk på et eksisterende avsnitt der du vil settet inn en tabell.
4. På verktøylinjen for rik tekst klikker du på og angir tabellegenskapene. Forsikre deg om at du velger første rad som topp, og juster tabellbredden slik at den fungerer effektivt på den minste skjermen du forventer å bruke. Hvis du for eksempel forventer at området skal bli vist på en telefon, er standardbredden på 767 piksler sannsynligvis for bred til at det kan vises på en telefonskjerm, selv når det er stablet. Du kan sette tabellbredden til en mindre størrelse, som 300 piksler, eller du kan sette bredden til 100 %.

Når du er ferdig, går du tilbake til modusen Visning og velger et visningsvalg med en skjermbredde på noe som er mindre enn 767 piksler, slik at du kan forhåndsvise resultatene. Du må være i visningsmodus, fordi en tabell ikke oppfører seg responsivt i redigeringsmodus.

Hvis du vil bruke responsive tabeller når du bygger et område fra et annet tema, må du kopiere koden fra design.css for StarterTheme til filen design.css for temaet du bruker.

1. Når du skal kopiere koden fra design.css for StarterTheme, klikker du på Utvikler i sidenavigeringen for Oracle Content Management.
2. Klikk på Vis alle temaer.
3. Velg StarterTheme og klikk på Åpne.
4. Klikk på utformingene, slik at du åpner mappen, og klikk deretter på standard.
5. Velg filen design.css file fra StarterTheme, og klikk på Last ned.
6. Åpne filen i et tekstredigeringsprogram og finn delen av filen som begynner med kommentaren An example CSS of how to render a table responsively.
7. Merk koden frem til neste kommentar, og kopier den.

   /**
    * 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;
     }
   }

8. Gjenta trinnene, slik at du laster ned filen design.css til malen du vil endre, åpne malen, og lim inn den kopierte koden i filen.
9. Lagre endringene og last den endrede design.css-filen som en ny revisjon av temaet du endrer.