css 在 pentaho table 组件中

Question

早上好，一个非常简单的问题，我创建了一个可扩展的 table，由主要的 table 和两个次要的 table 组成。发生在我身上的是，我希望它们以阶梯模式显示（主要总宽度，第二小并向右对齐，第三向右对齐且更小）。我不知道把 css 代码放在哪里。在布局面板中，我必须为一列添加 css class 吗？那么我应该把引用那些 class 的 css 代码放在哪里呢？非常感谢你

Answer 1

使用 CSS :nth-child() Selector 或添加 class 更新 table margin-left，如下所示

body {
  margin: 0;
}

table {
  border: 1px solid #dee2e6;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  border-collapse: collapse;
}
table td,
table th {
  padding: 5px 10px;
  vertical-align: top;
  border: 1px solid #ccc;
}


/* staircase style */
table:nth-child(2) {
  margin-left: 50px;
}
table:nth-child(3) {
  margin-left: 100px;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    <th>header 4</th>
  </tr>
  <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
  </tr>
</table>
<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    <th>header 4</th>
  </tr>
  <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
  </tr>
</table>
<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    <th>header 4</th>
  </tr>
  <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
  </tr>
</table>

Answer 2

在布局面板中，有一个用于添加资源的选项。 Layout structure options

选择添加 CSS 资源。您还可以 select 一个 CSS 文件。文件的好处是，如果您决定在将来某个时候更改 CSS，您可以在多个仪表板中保持格式一致。

css 在 pentaho table 组件中

css in pentaho table component

css

layout

pentaho