Dynamisk tabeldesign

Oracle Content Management omfatter et eksempel-CSS for en dynamisk tabel i en afsnitskomponent, der muliggør stabling af rækkedata, når de vises på mobile enheder.

En dynamisk tabel regulerer tabellen, så den viser indhold effektivt alt efter skærmens størrelse. For eksempel kan en tabel med 5 kolonner vises vandret på en webside uden problemer, men når den vises på en telefon, præsenteres dataene muligvis bedre, når de er stablet. Bemærk, at dynamiske tabeller skal have en overskriftsrække for at fungere korrekt.

I følgende genererede HTML kan du se, at der er føjet en data-label-attribut til hver tabelcelle med værdier, der matcher kolonneoverskriftens tekst.

<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 den pågældende attribut er føjet til hver enkelt celle, stables TD'erne, når du anvender CSS-reglerne 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;
  }

Bemærk, at mediereglen nedenfor forespørger om skærmstørrelsen og kun træder i kraft, hvis skærmstørrelsen er mindre end 767 pixel:

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

Kodeeksemplet for brug af css for at gøre det muligt for indsatte tabeller at være dynamiske findes i design.css-standardfilen for det angivne StarterTheme. Hvis du opbygger et site fra StarterTheme, er de tabeller, der indsættes i et afsnit, dynamiske som standard. Sådan indsætter du en tabel:

1. Åbn et site i Oracle Content Management, og slå tilstanden Rediger til.
2. Opret en ny opdatering, eller vælg en eksisterende opdatering, der skal modificeres.
3. Træk en ny afsnitskomponent til siden, og klik, der hvor du vil indsætte en tabel, eller klik på et eksisterende afsnit, hvor du vil indsætte en tabel.
4. Klik på på Rich Text-værktøjslinjen, og angiv egenskaberne for tabellen. Sørg for at vælge den første række som overskrift, og reguler tabelbredden, så den fungerer effektivt på den mindste skærm, hvor tabellen forventes at blive vist. Hvis du for eksempel forventer, at sitet skal vises på en telefon, er standardbredden på 767 pixel sandsynligvis for bred til at blive vist i sin fulde bredde på en telefonskærm, selv hvis dataene stables. Du skal angive tabelbredden til en mindre størrelse, for eksempel 300 pixel, eller angive bredden til 100 %.

Når du er færdig, skal du slå tilstanden Vis til igen og angive et visningsvalg med en skærmbredde på mindre end 767 pixel for at se en eksempelvisning af resultaterne. Du skal være i tilstanden Vis, da en tabel ikke fungerer dynamisk i visningen Rediger.

Hvis du vil bruge dynamiske tabeller, når du opbygger et site fra et andet tema, skal du kopiere koden fra StarterTheme design.css til filen design.css for det tema, som du bruger.

1. Hvis du vil kopiere koden fra StarterTheme design.css, skal du klikke på Udvikler i sidenavigationen i Oracle Content Management.
2. Klik på Vis alle temaer.
3. Vælg StarterTheme, og klik på Åbn.
4. Klik på designs for at åbne mappen, og klik derefter på default.
5. Vælg filen design.css file fra StarterTheme, og klik på Download.
6. Åbn filen i en teksteditor, og find den sektion i filen, der begynder med kommentaren An example CSS of how to render a table responsively.
7. Marker koden indtil den næste 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. Gentag trinnene til download af filen design.css for den skabelon, som du vil modificere, åbn skabelonen, og indsæt den kopierede kode i filen.
9. Gem ændringerne, og upload den modificerede design.css-fil som en ny revision til det tema, som du er i gang med at modificere.