Reagoivan taulukon rakenne

Oracle Content Management tarjoaa CSS-esimerkkikoodin kappalekomponenttiin sisältyvälle reagoivalle taulukolle. Se mahdollistaa rivitietojen pinoamisen, kun taulukko näytetään mobiililaitteissa.

Reagoiva taulukko mukauttaa taulukkoa siten, että sen sisältö näytetään sopivalla tavalla erikokoisilla näytöillä. Esimerkiksi viisisarakkeinen taulukko saattaa näkyä hyvin vaakasuunnassa web-sivulla, mutta puhelimella katseltaessa tiedot saattavat näkyä paremmin pinottuina. Huomaa, että reagoivat taulukot tarvitsevat otsikkorivin, jotta ne toimisivat oikein.

Seuraavassa luodussa HTML-koodissa jokaiseen taulukon soluun on lisätty data-label-määrite. Määritteiden arvot vastaavat sarakkeen otsikon tekstiä.

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

Kun kyseinen määrite on jokaisessa solussa, TD-elementit pinotaan päällekkäin, kun käytät alla olevia CSS-sääntöjä.

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

Huomaa, että alla oleva media-sääntö tekee näytön kokoa koskevan kyselyn ja että sääntö tulee voimaan vain, jos näytön koko on alle 767 kuvapistettä:

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

Koodiesimerkki, jonka avulla lisätyistä taulukoista voi tehdä reagoivia css-koodin avulla, sijaitsee mukana tulevan StarterTheme-teeman oletusarvoisessa design.css-tiedostossa. Jos muodostat sivuston StarterTheme-teemasta, kappalepaikkaan lisätyt taulukot ovat oletusarvoisesti reagoivia. Taulukon lisäys:

1. Avaa Oracle Content Management -palvelussa sivusto ja vaihda Muokkaa-tilaan.
2. Luo uusi päivitys tai valitse olemassa oleva päivitys muokattavaksi.
3. Vedä uusi kappalekomponentti sivulle ja napsauta kohtaa, johon haluat lisätä taulukon. Voit myös napsauttaa olemassa olevan kappaleen kohtaa, johon haluat lisätä taulukon.
4. Napsauta muotoillun tekstin työkalurivillä ja määritä taulukon ominaisuudet. Muista valita ensimmäinen rivi otsikoksi ja säätää taulukon leveyttä siten, että se toimii hyvin pienimmässä näytössä, jota odotetaan käytettävän. Jos esimerkiksi odotat, että sivustoa katsellaan puhelimella, 767 kuvapisteen oletusarvoinen leveys ei todennäköisesti näy kokonaan puhelimessa, vaikka pinoamista käytettäisiin. Taulun leveys kannattaa määrittää pienemmäksi, esimerkiksi 300 kuvapisteeksi. Leveydeksi voi myös määrittää 100 prosenttia.

Kun olet valmis, vaihda takaisin Katselu-tilaan ja esikatsele tulosta valitsemalla näyttövalinta, jossa näytön leveys on alle 767 kuvapistettä. Sinun on oltava katselutilassa, koska taulukko ei toimi reagoivasti muokkaustilassa.

Jos haluat käyttää reagoivia taulukkoja toiseen teemaan perustuvan sivuston luonnissa, koodi on kopioitava StarterTheme-teeman design.css-tiedostosta käytettävän teeman design.css-tiedostoon.

1. Jos haluat kopioida koodin StarterTheme-teeman design.css-tiedostosta, valitse Kehittäjä Oracle Content Management -palvelun reunassa olevasta navigointipalkista.
2. Valitse Näytä kaikki teemat.
3. Valitse StarterTheme ja sitten Avaa.
4. Avaa kansio napsauttamalla rakenteita ja valitse sitten oletus.
5. Valitse design.css-tiedosto StarterTheme-teemasta ja valitse Nouda.
6. Avaa tiedosto tekstieditorissa ja etsi tiedoston osa, joka alkaa kommentilla An example CSS of how to render a table responsively.
7. Valitse tämän kommentin ja seuraavan kommentin välinen koodi ja kopioi se.

   /**
    * 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. Nouda muokattavan mallipohjan design.css-tiedosto toistamalla edellä olevat vaiheet, avaa mallipohja ja liitä kopioitu koodi tiedostoon.
9. Tallenna muutokset ja lataa muokattu design.css-tiedosto uutena versiona muokattavaan teemaan.