Необходимо спроектировать сложную HTML таблицу

Question

Мне нужно спроектировать таблицу HTML как приложение ниже, но я, кажется, борюсь из-за моего непонимания в таблице HTML.

Это то, что я придумал, поэтому далеко, но, как видите, это даже близко не к конечному результату. Я надеюсь, что кто-то может указать мне правильное направление.

<section class="mb-5">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <!-- Heading -->
        <h2 class="mb-3">
          Task activities reports
        </h2>

        <div class="table-responsive border">
          <table class="table mb-0">
            <thead>
              <tr>
                <th scope="col">Service</th>
                <th scope="col">Category</th>
                <th scope="col">
                  <table>
                    <thead>
                      <tr>
                        <th colspan="10">Percent completed</th>
                      </tr>
                      <tr>
                        <th>10%</th>
                        <th>20%</th>
                        <th>30%</th>
                        <th>40%</th>
                        <th>50%</th>
                        <th>60%</th>
                        <th>70%</th>
                        <th>80%</th>
                        <th>90%</th>
                        <th>100%</th>
                      </tr>
                    </thead>
                  </table>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Clipping path</td>
                <td>Category 1</td>
                <td>
                  <table>
                    <tbody>
                    <tr>
                      <td>0</td>
                      <td>0</td>
                      <td>0</td>
                      <td>0</td>
                      <td>2</td>
                      <td>3</td>
                      <td>0</td>
                      <td>0</td>
                      <td>0</td>
                      <td>1</td>
                    </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

введите описание изображения здесь

Answer 1

Вам необходимо использовать атрибуты colspan и rowspan, а не вложенные таблицы. colspan сообщает ячейке, чтобы она занимала ширину двух столбцов, а rowspan сообщает, что она должна занимать высоту двух строк.

Я визуализировал ваши строки заголовка и первые три строки содержимого на основе что я здесь сказал. Остальное содержимое таблицы следует тем же принципам.

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th rowspan="2">Service</th>
      <th rowspan="2">Category</th>
      <th colspan="11">Percent completed</th>
    </tr>
    <tr>
      <th>10%</th>
      <th>20%</th>
      <th>30%</th>
      <th>40%</th>
      <th>50%</th>
      <th>60%</th>
      <th>70%</th>
      <th>80%</th>
      <th>90%</th>
      <th>100%</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="6">Clipping Path</td>
      <td>Category 1</td>
      <td></td>
      <td>3</td>
      <td></td>
      <td></td>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>1000</td>
      <td>1005</td>
    </tr>
    <tr>
      <td>Category 2</td>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>3</td>
      <td></td>
      <td></td>
      <td></td>
      <td>1100</td>
      <td>1105</td>
    </tr>
    <tr>
      <td>Category 3</td>
      <td></td>
      <td></td>
      <td></td>
      <td>5</td>
      <td></td>
      <td></td>
      <td>4</td>
      <td></td>
      <td></td>
      <td>1200</td>
      <td>1209</td>
    </tr>
  </tbody>
</table>

Я добавил CSS для границ, чтобы вы могли видеть края ячеек.

Немного сложно привыкнуть в первую очередь, потому что вы должны игнорировать присутствие ячеек в строках, где они «растут» до того места, где они были объявлены. Таким образом, я применил rowspan="2" к заголовку «Служба», и эта ячейка «вырастет» в следующую строку вместе с категорией. Таким образом, заголовок 10% отображается ниже процента (поскольку он охватывает только 1 строку), потому что служба и категория занимают место в строке, хотя никогда не объявлены в <tr>.