響應式表格設計

Oracle Content Management 提供段落元件內響應式表格的CSS 範例， ... 在下列產生的HTML 中，請注意，已對具有符合資料欄標頭文字值的每個表格儲存格新增資料標籤屬性 ... Gotomaincontent 149/368 響應式表格設計 OracleContentManagement提供段落元件內響應式表格的CSS範例，在行動裝置上顯示時可啟用資料列堆疊處理。

響應式表格可根據螢幕大小調整表格以有效地顯示內容。

例如，5欄表格可在網頁上以水平方式正確地顯示，但在電話上檢視時，資料可能最好以堆疊形式呈現。

請注意，響應式表格需要有標頭資料列才能正常運作。

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

ACCOUNT DUEDATE AMOUNT MINIMUM PERIOD

Visa 04/16/2020 $3,090 03/09/2020-04/08/2020 每個儲存格都有該屬性之後，TD會在套用下面的CSS規則時彼此堆疊。

.scs-paragraph:not(.scs-paragraph-edit)tabletd{ border-bottom:1pxsolid#ddd; display:block; text-align:right; } .scs-paragraph:not(.scs-paragraph-edit)tabletd::before{ content:attr(data-label); float:left; font-weight:bold; } 請注意，下方的媒體規則會查詢螢幕大小，且只有在螢幕大小小於767像素時才會生效： @mediascreenand(max-width:767px){ 使用CSS讓插入的表格成為響應式表格的程式碼範例位於所提供StarterTheme的預設design.css中。

如果從StarterTheme建置網站，插入至段落槽位的表格預設為響應式表格。

若要插入表格： 在OracleContentManagement中，開啟網站，並切換至編輯模式。

建立新的更新，或選擇要修改的現有更新。

將新的段落元件拖曳至頁面，然後按一下想要插入表格的位置，或在想要插入表格的現有段落按一下。

在RTF工具列上，按一下，並設定表格特性。

請確定選取第一列作為標頭，並調整表格寬度，以在預期使用的最小螢幕有效地運作。

例如，如果您預期在電話上檢視網站，則767像素的預設寬度可能會太寬，因此無法在電話螢幕上完整顯示，即使以堆疊處理也是一樣。

建議您將表格寬度設為較小大小(如300像素)，或將寬度設為100%。

完成時，請切換回檢視模式，並選取螢幕寬度小於767像素的檢視選項來預覽結果。

您必須處於檢視模式，因為表格在編輯模式時不能以響應式的方式運作。

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

若要複製StarterThemedesign.css的程式碼，請按一下OracleContentManagement側邊導覽中的開發人員。

按一下檢視所有主題。

選取StarterTheme，然後按一下開啟。

按一下設計以開啟資料夾，然後按一下預設。

選取StarterTheme的design.css檔案，然後按一下下載。

在文字編輯器中開啟檔案，並找到開頭為註解AnexampleCSSofhowtorenderatableresponsively的檔案區段。

選取程式碼，直到下個註解為止，並進行複製。

/** *AnexampleCSSofhowtorenderatableresponsively. *Itenablesstackingofrowdataonmobiledevices. *Onlydothisforviewmode(notforeditmode). * *Oneachcellrendered,itaddsauser-definedattribute *'data-label'withvaluematchingthecolumnheadertext. */ @mediascreenand(max-width:767px){ .scs-paragraph:not(.scs-paragraph-edit)table{ border:0; } .scs-paragraph:not(.scs-paragraph-edit)tablecaption{ font-size:1.3em; } .scs-paragraph:not(.scs-paragraph-edit)tablethead{ border:none; clip:rect(0000); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } .scs-paragraph:not(.scs-paragraph-edit)tabletr{ border-bottom:3pxsolid#ddd; display:block; margin-bottom:.625em; } .scs-paragraph:not(.scs-paragraph-edit)tabletd{ border-bottom:1pxsolid#ddd; display:block; text-align:right; } .scs-paragraph:not(.scs-paragraph-edit)tabletd::before{ content:attr(data-label); float:left; font-weight:bold; } .scs-paragraph:not(.scs-paragraph-edit)tabletd:last-child{ border-bottom:0; } } 重複步驟來下載您想要修改之樣板的design.css檔案，並開啟樣板，然後將複製的程式碼貼到檔案中。

儲存變更，並將修改過的design.css檔案以新版本方式上傳至您目前修改的主題。