Responsiv tabelldesign

Oracle Content Management ger en exempel-CSS för en responsiv tabelldesign i en styckekomponent som möjliggör stapling av raddata när de visas på mobila enheter.

En responsiv tabell justerar tabellen för att visa innehåll effektivt beroende på storleken på skärmen. Till exempel kan en tabell med fem kolumner se bra ut på en webbsida men på en mobiltelefon kan data se bättre ut om de visas staplat. Observera att responsiva tabeller behöver en rubrikrad för att kunna fungera korrekt.

I följande genererade HTML kan du observera att det finns ett tillagt dataetikettattribut för varje tabellcell med värden som matchar kolumnrubriktexten.

<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 det attributet finns för varje cell staplas TD på varandra när du tillämpar CSS-reglerna nedan.

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

Observera att medieregeln nedan frågar om skärmstorleken och verkställs bara när skärmstorleken är mindre än 767 pixlar:

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

Kodexemplet för användning av css för att göra så att infogade tabeller kan vara responsiva finns i den standardinställda design.css för det tillhandahållna StarterTheme. Om du bygger en webbplats från StarterTheme blir tabellerna som infogas i styckeplatsen responsiva som standard. Så här infogar du en tabell:

1. Öppna en webbplats i Oracle Content Management och växla till läget Redigera.
2. Skapa en ny uppdatering eller välj en befintlig uppdatering att ändra.
3. Dra en ny styckekomponent till sidan och klicka där du vill infoga en tabell eller klicka på ett befintligt stycke där du vill infoga en tabell.
4. I Rich Text-verktygsfältet klickar du på och anger tabellegenskaperna. Se till att välja den första raden som rubrik och justera tabellbredden så att den fungerar effektivt på de minsta skärmarna som förväntas användas. Om du till exempel förväntar dig att webbplatsen ska visas på en telefon är standardbredden 767 pixlar sannolikt för bred för att visas fullständigt på en telefonskärm, även om den staplas. Det är bättre att ställa in en mindre tabellbredd, som 300 pixlar, eller ställa in bredden på 100 %.

När du är klar växlar du tillbaka till läget Visa och väljer ett visningsalternativ med en skärmbredd på något värde mindre än 767 pixlar för att förhandsgranska resultatet. Du måste vara i visningsläge, eftersom en tabell inte beter sig responsivt i redigeringsläge.

Om du vill använda responsiva tabeller när du skapar en webbplats utifrån ett annat tema måste du kopiera koden från StarterTheme design.css till design.css-filen för det tema du använder.

1. Kopiera koden från StarterTheme design.css genom att klicka på Utvecklare i sidonavigeringen i Oracle Content Management.
2. Klicka på Visa alla teman.
3. Välj StarterTheme och klicka på Öppna.
4. Klicka på designer för att öppna mappen och klicka sedan på standard.
5. Välj design.css-filen från StarterTheme och klicka på Ladda ned.
6. Öppna filen i en textredigerare och leta reda på den sektion av filen som börjar med kommentaren An example CSS of how to render a table responsively (En exempel-CSS för hur du återger en tabell responsivt).
7. Markera koden till nästa kommentar och kopiera 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. Upprepa stegen för att ladda ned design.css-filen för den mall du vill ändra, öppna mallen och klistra in den kopierade koden i filen.
9. Spara ändringarna och ladda upp den ändrade design.css-filen som en ny version av det tema du ändrar.