自适应表设计

Oracle Content Management 为段落组件内的自适应表提供了一个示例 CSS，该 CSS 允许堆叠移动设备上显示的行数据。

自适应表将根据屏幕大小调整表以有效地显示内容。例如，一个 5 列的表在 Web 页上可以很好地沿水平方向显示，但是当在手机上查看时，以堆叠方式呈现数据可能会更好。请注意，自适应表需要有一个标题行才能正确工作。沿水平和垂直方向显示的网站

请注意，在所生成的如下 HTML 中，为其中的值与列标题文本相匹配的每个表单元格添加了一个 data-label 属性。

<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. 在多信息文本工具栏上，单击 表插入图标 并设置表属性。确保选择第一行作为标题，然后调整表宽，使其在预期要使用的最小屏幕上有效地工作。例如，如果您预期在手机上查看该站点，则默认宽度 767 像素将有可能太宽，无法在手机屏幕上完全显示，即使堆叠放置也是如此。您希望将表宽设置得小些（如 300 像素）或者将宽度设置为 100%。

完成后，切换回到查看模式并选择屏幕宽度小于 767 像素的查看选项，以预览结果。您必须在查看模式下，因为表在编辑模式无法以响应方式工作。

查看模式下的站点预览

如果您在基于其他主题构建站点时希望使用自适应表，则需要将 StarterTheme design.css 中的代码复制到正在使用的主题的 design.css 文件。

  1. 要复制 StarterTheme design.css 中的代码，请单击 Oracle Content Management 侧面导航中的开发人员。
  2. 单击查看所有主题。
  3. 选择 StarterTheme 并单击打开。
  4. 单击 designs 以打开该文件夹，然后单击 default。
  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 文件作为新修订版上载到您正在修改的主题。