響應式表格設計

Oracle Content Management 提供段落元件內響應式表格的 CSS 範例，在行動裝置上顯示時可啟用資料列堆疊處理。

響應式表格可根據螢幕大小調整表格以有效地顯示內容。例如，5 欄表格可在網頁上以水平方式正確地顯示，但在電話上檢視時，資料可能最好以堆疊形式呈現。請注意，響應式表格需要有標頭資料列才能正常運作。水平和垂直顯示網站

在下列產生的 HTML 中，請注意，已對具有符合資料欄標頭文字值的每個表格儲存格新增資料標籤屬性。

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

每個儲存格都有該屬性之後，TD 會在套用下面的 CSS 規則時彼此堆疊。

  .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 建置網站，插入至段落槽位的表格預設為響應式表格。若要插入表格：

  1. 在 Oracle Content Management 中，開啟網站，並切換至編輯模式。
  2. 建立新的更新，或選擇要修改的現有更新。
  3. 將新的段落元件拖曳至頁面，然後按一下想要插入表格的位置，或在想要插入表格的現有段落按一下。
  4. 在 RTF 工具列上，按一下 表格插入圖示，並設定表格特性。請確定選取第一列作為標頭，並調整表格寬度，以在預期使用的最小螢幕有效地運作。例如，如果您預期在電話上檢視網站，則 767 像素的預設寬度可能會太寬，因此無法在電話螢幕上完整顯示，即使以堆疊處理也是一樣。建議您將表格寬度設為較小大小 (如 300 像素)，或將寬度設為 100%。

完成時，請切換回檢視模式，並選取螢幕寬度小於 767 像素的檢視選項來預覽結果。您必須處於檢視模式，因為表格在編輯模式時不能以響應式的方式運作。

檢視模式網站預覽

如果您想要在從不同主題建置網站時使用響應式表格，則需要將 StarterTheme design.css 中的程式碼複製到您目前使用之主題的 design.css 檔案。

  1. 若要複製 StarterTheme design.css 的程式碼，請按一下 Oracle Content Management 側邊導覽中的開發人員。
  2. 按一下檢視所有主題。
  3. 選取 StarterTheme，然後按一下開啟。
  4. 按一下設計以開啟資料夾，然後按一下預設。
  5. 選取 StarterTheme 的 design.css 檔案，然後按一下下載。
  6. 在文字編輯器中開啟檔案，並找到開頭為註解 An example CSS of how to render a table responsively 的檔案區段。
  7. 選取程式碼，直到下個註解為止，並進行複製。 
    /**
 * 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. 重複步驟來下載您想要修改之樣板的 design.css 檔案，並開啟樣板，然後將複製的程式碼貼到檔案中。
  9. 儲存變更，並將修改過的 design.css 檔案以新版本方式上傳至您目前修改的主題。