pentaho 表格组件中的 css

Posted 2023-04-18

【中文标题】pentaho 表格组件中的 css

【英文标题】：css in pentaho table component

【发布时间】：2018-10-09 07:09:28

【问题描述】：

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

【问题讨论】：

嗨，欢迎来到堆栈溢出。 Please take the time to read how to ask question，如果您不提供任何代码，我们无法为您提供帮助，请您输入您的代码，最好放在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

我没有任何 css 代码，因为我不知道我必须在哪里以及如何放置此代码但我插入了一张图片来解释情况。红色的桌子是我现在拥有的，绿色的桌子是我想要的

【参考方案1】：

使用CSS :nth-child() Selector 或添加class 更新表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>

【讨论】：

谢谢，但是我必须把这段代码放在 pentaho cde 的什么地方？我不知道我必须把这个放在哪里。

从未使用过pentaho，因此无能为力

【参考方案2】：

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

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