Как сделать таблицу HTML с заголовком среднего столбца, имеющим две строки с 1 столбцом слева и справа? - PullRequest
Новая
       5

Как сделать таблицу HTML с заголовком среднего столбца, имеющим две строки с 1 столбцом слева и справа?

0 голосов
/ 27 мая 2020 
<table class="container">

  <thead>

      <th rowspan="2">Device</th>

      <th class="container-costings" colspan="6">NETWORK</th>
      <tr class="costings-headings">
        <td>
          O2 Recycle
        </td>
        <td>
          EE
        </td>
        <td>
          Vodafone
        </td>
        <td>
          Three
        </td>
        <td>
          Mazuma
        </td>
        <td>
          Carphone W
        </td>
      </tr>

      <th rowspan="2">Device</th>



  </thead>
</table>

Я думал добавить 

<th rowspan="2">Device</th>

После того, как tr, который создает строки в одном столбце, будет работать, но, к сожалению, он просто перейдет к следующей строке в начале вместо того, чтобы идти вправо сторона середины.

Цель состоит в том, чтобы сделать его похожим на прикрепленное изображение enter image description here

Unfortunaetelt, последний столбец зеленого цвета переходит к следующей строке момент, и я не понимаю, почему, так как он все еще находится в ад

1 Ответ

2 голосов
/ 27 мая 2020

Попробуйте это (вам нужно выполнить форматирование CSS)

https://jsfiddle.net/fraggley/2L4qcats/9/

<table class="container">

  <thead>

      <tr>
      <td rowspan=2>Device</td>
      <td class="text-center" colspan=6>Network</td>
      <td rowspan=2>Average</td>
      </tr>
     <tr>
      <td>o2</td>
      <td>EE</td>
      <td>Vodafone</td>
      <td>Three</td>
      <td>Mazuma</td>
      <td>CPW</td>
      </tr>

  </thead>
</table>
...