Создание сложной таблицы - PullRequest
Новая
       22

Создание сложной таблицы

0 голосов
/ 24 мая 2018

В настоящее время я работаю над новым веб-сайтом, и возникают некоторые проблемы при составлении новой таблицы.Как видно на рисунке, макет таблицы имеет немного более сложную настройку, чем обычные таблицы.Проблема, с которой я столкнулся, заключается в том, что после добавления группы ячеек в ячейку 2 ячейки 3, 4, 5 и 6 перемещаются ниже нижней границы ячейки 2.

Вот текущий код:

<table border="0" cellpadding="0" width="100%">
  <tr>
    <td style="vertical-align:top" width="27%" colspan="3">
      <center><img src="IMAGE_URL" hspace="10"/><br/><a href="URL" title="TITLE" target="_blank"><img src="IMAGE_URL" onmouseover="this.src='IMAGE_URL'" onmouseout="this.src='IMAGE_URL'"/></a></center>
    </td>
    <td align="justify" style="vertical-align:top; line-height:20px" width="73%" rowspan="10">
      <font size="3">TEXT</font>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; line-height:20px; font-size:15pt;" colspan="3">
      <br/><center><b>TEXT</b></center>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="right">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="right">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
    <td style="vertical-align:top; line-height:20px" width="10px">
      <p align="left">TEXT<br/>TEXT<br/>TEXT</p>
    </td>
  </tr>
</table>

1 Ответ

0 голосов
/ 24 мая 2018

Я не собираюсь записывать реальный код, потому что он довольно прост.Что вам нужно сделать, это:

  • Иметь большую таблицу с одной строкой и двумя столбцами (ячейками)
  • В первой ячейке создать новую таблицу с тремя строками слевасторона вашей диаграммы (строка для «1», строка для «3» и еще одна строка для «4», «5» и «6»)
  • Во второй ячейке основной таблицы содержимого «»2 "

Вот и все.Обратите внимание, что высота ячейки «1» будет зависеть от содержимого, которое вы в нее помещаете.Думаю, с остальным все будет в порядке, а большой главный стол заставит ячейку "2" иметь такую ​​же высоту, как и все остальные.

...