Search code examples
csslayoutpentaho

css in pentaho table component

Good morning, A very simple question, I have created an expandable table consisting of the main table and the two secondary tables. What happens to me is that I want them to show in staircase mode (the main total width, the second smallest and aligned to the right and the third to the right and smaller). I do not know where to put the css code. In the layout panel I have to put a css class for a column? then where do I put the css code that refers to those classes? Thank you very much enter image description here

Solution

  • Update the table margin-left using CSS :nth-child() Selector or by adding a class, as shown below

    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>