css in pentaho компонент таблицы - PullRequest
Новая
       19

css in pentaho компонент таблицы

0 голосов
/ 09 октября 2018

Доброе утро, очень простой вопрос, я создал расширяемую таблицу, состоящую из основной таблицы и двух дополнительных таблиц.Что происходит со мной, так это то, что я хочу, чтобы они отображались в режиме лестницы (основная общая ширина, вторая наименьшая и выровненная вправо, а третья справа и меньшая).Я не знаю, где поставить код CSS.В панели макета я должен поставить класс CSS для столбца?тогда где я могу поместить код CSS, который ссылается на эти классы?Большое спасибо enter image description here

1 Ответ

0 голосов
/ 09 октября 2018

Обновите таблицу margin-left, используя CSS :nth-child() Selector или добавив class, как показано ниже 

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>
...