CSS3 селекторы с Handsontable - PullRequest
Новая
       28

CSS3 селекторы с Handsontable

0 голосов
/ 03 апреля 2020

Я использую Handsontable и пытаюсь заставить отображение таблицы выглядеть немного иначе. Первоначально я пытался использовать jQuery для этого, но Handsontable JS продолжал отменять любые изменения стиля, которые я делал с моим jQuery, и я не мог понять, почему. Итак, мне удалось получить многое из того, что я хотел сделать, используя селекторы CSS3.

То, что я пытаюсь сказать, это повлиять на последнюю строку перед следующей <th class="ht_nestingLevels ht_nestingParent">, чтобы иметь небольшой отступ в нижней части ... в основном, чтобы разметить группу вложенных строк. Вот скриншот этого.

https://imgur.com/a/GlWstfV

Итак, строки 56, 59, 61 и др. c. будет иметь отступы, но эта таблица генерируется динамически, поэтому я не могу ссылаться на эти строки с каким-то жестким индексом. У любого родителя может быть неограниченное число детей.

Вот мой CSS3: 

    <style type="text/css">
    #productionLogTable {
        font-size:11px;
        color: black;
        font-weight: bold;
    }

    th.ht_nestingLevels {
        background-color: lightgray;
        font-weight: bold;
    }
    th.ht_nestingLevels.ht_nestingParent {
        color: black;
        font-weight: bold;
        font-size: 12px;
        background-color: white;
    }
    th.ht_nestingParent ~ td {
        font-size: 12px;
        font-weight: bold;
        padding: 5px 0px 10px 10px;
        color: black;
        background-color: white;
    }
    .htCore tbody tr th:not(.ht_nestingParent) ~ td {
        padding-bottom: 24px;
    }
</style>

Единственная проблема, с которой я столкнулся, связана с последней частью: .htCore tbody tr th:not(.ht_nestingParent) ~ td {

Вот образец HTML: 

<tbody>
    <tr>
        <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">1</span>
                <div class="ht_nestingButton ht_nestingCollapse"></div>
            </div></th>
        <td class="">7-ELEVEN</td>
        <td class="">22971161</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
    </tr>
    <tr>
        <th class="ht_nestingLevels ht__highlight"><div class="relative"><span class="ht_nestingLevel_empty"></span><span class="rowHeader">2</span></div></th>
        <td class="current highlight"></td>
        <td class=""></td>
        <td class="">A</td>
        <td class="">SOUTH MOD 67 ID FACE||7-11 OKLAHOMA COLORS||95-5/8 X 96-3/4||DWG: SO1067RF.OK (102138)||</td>
        <td class="">4</td>
        <td class="">2020-02-20</td>
        <td class="">2020-01-24</td>
    </tr>
    <tr>
        <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">3</span>
                <div class="ht_nestingButton ht_nestingCollapse"></div>
            </div></th>
        <td class="">7-ELEVEN</td>
        <td class="">22983321</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
    </tr>
</tbody>
...