Как мне нацелить стол, который похоронен под некоторыми div? - PullRequest
Новая
       39

Как мне нацелить стол, который похоронен под некоторыми div?

0 голосов
/ 24 января 2020

У меня есть таблица, которую я пытаюсь нацелить на 5-ю строку, используя CSS. Он похоронен под 4 делами.

Как лучше всего нацелиться на стол? Он использует класс, который дублируется много раз по всему сайту на многих других таблицах, но я только wi sh нацеливаюсь на эту таблицу, к которой я добавил класс .q4:

В основном я пытаюсь изменить нижнюю границу строки в таблице, которая вложена в div внутри div, внутри div, внутри div. Полный html ниже: 

<div class="mobile-league-table q4">
<div class="sportspress">
    <div class"sp-template sp-template-league-table">
        <h4 class="sp-table-caption">UAE Division 1</h4>
        <div class="sp-table-wrapper">
            <div class="sp-scrollable-table-wrapper">
                <table class="sp-league-table sp-data-table sp-scrollable-table" data-sp-rows="10">
                    <thead>
                        <tr>
                            <th class="data-rank">Pos</th>
                            <th class="data-name">Team</th>
                            <th class="data-p">P</th>
                            <th class="data-w">W</th>
                            <th class="data-l">L</th>
                            <th class="data-d">D</th>
                            <th class="data-pf">PF</th>
                            <th class="data-pa">PA</th>
                            <th class="data-pd">PD</th>
                            <th class="data-bp">BP</th>
                            <th class="data-pts">Pts</th>
                            <th class="data-form">Form</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="odd sp-row-no-0">…</tr>
                    <tr class="even sp-row-no-1">…</tr>
                    <tr class="odd sp-row-no-2">…</tr>
                    <tr class="even sp-row-no-3">…</tr>
                    <tr class="odd sp-row-no-4">…</tr>
                    <tr class="even sp-row-no-5">…</tr>
                    <tr class="odd sp-row-no-6">…</tr>
                    <tr class="even sp-row-no-7">…</tr>
                    <tr class="odd sp-row-no-8">…</tr>
                    <tr class="even sp-row-no-9">…</tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Поскольку таблица внутри q4 div - единственная таблица, на которую мы можем просто нацелиться 

.q4 table tbody tr:nth-child(your number here) td {
   border-bottom: 1px solid black;
}


td {
  padding:.25em;
}

.q4 table tbody tr:nth-child(3) td {
   border-bottom: 1px solid black;
}
<div class="mobile-league-table q4">
  <div class="sportspress">
    <div class"sp-template sp-template-league-table">
    <h4 class="sp-table-caption">UAE Division 1</h4>
    <div class="sp-table-wrapper">
      <div class="sp-scrollable-table-wrapper">
        <table
          class="sp-league-table sp-data-table sp-scrollable-table"
          data-sp-rows="10"
        >
          <thead>
            <tr>
              <th class="data-rank">Pos</th>
              <th class="data-name">Team</th>
              <th class="data-p">P</th>
              <th class="data-w">W</th>
              <th class="data-l">L</th>
              <th class="data-d">D</th>
              <th class="data-pf">PF</th>
              <th class="data-pa">PA</th>
              <th class="data-pd">PD</th>
              <th class="data-bp">BP</th>
              <th class="data-pts">Pts</th>
              <th class="data-form">Form</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 24 января 2020

Wordpress? Yikes.

Лучше всего делать некоторые манипуляции с DOM после загрузки HTML. Я предлагаю использовать jquery. Но если вы не можете импортировать jquery в ваш проект. Конечно, вы можете достичь этого с помощью javascript. 

var x = document.getElementsByClassName('.sp-row-no-4');
x[0].innerHTML = "Hello World!";

getElementsByClassName () возвращает массив, даже если через имя этого класса найден только один элемент. Надеюсь, это поможет.

...