Можно ли получить следующий макет таблицы (используя rowspan)?

Я пытаюсь получить таблицу HTML, которая выглядит следующим образом:

enter image description here

В настоящее время я пытаюсь использовать следующую разметку, чтобы получить это (в основном, я умножил 4 и 6 вместе, чтобы получить 24, и использовал общие множители, чтобы попытаться получить то, что хотел):

<table>
    <tbody>
        <tr>
            <td rowspan="24">1</td>
            <td rowspan="4">2</td>
            <td rowspan="6">3</td>
        </tr>
        <tr>
            <td rowspan="4">4</td>
            <td rowspan="6">5</td>
        </tr>
        <tr>
            <td rowspan="4">6</td>
            <td rowspan="6">7</td>
        </tr>
        <tr>
            <td rowspan="4">8</td>
            <td rowspan="6">9</td>
        </tr>
        <tr>
            <td rowspan="4">10</td>
        </tr>
        <tr>
            <td rowspan="4">11</td>
        </tr>
    </tbody>
</table>

Однако приведенная выше разметка совсем не выполняет то, что я хочу. Можно ли с помощью rowspan получить таблицу, подобную показанной выше? Если не с rowspan, есть ли другие способы получить таблицу выше в HTML?

Спасибо.

Создайте таблицу и сделайте style="transform: rotate(-90deg);". / с

Phiter 31.10.2018 13:38

Ждать! Какие? Вы шутите? Не будет ли также повернут весь текст? Кроме того, не нанесет ли это ущерб программам чтения с экрана и т. д.?

HartleySan 31.10.2018 13:40

/ s означает сарказм. Я пошутил! ха-ха. Я пытаюсь придумать для вас хорошее решение.

Phiter 31.10.2018 13:42

О, хорошо. Я не знала, что / s означает «сарказм». Спасибо за разъяснение.

HartleySan 31.10.2018 13:42
0
4
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете добиться того же, используя следующую структуру html

<table border="1" cellspacing="0" cellpadding="20">
  <tbody>
    <tr>
      <td rowspan="24">1</td>
      <td rowspan="4">2</td>
      <td rowspan="6">3</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">4</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="6">7</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="4">6</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">8</td>
      <td rowspan="6">7</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">10</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="6">9</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="4">11</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

Понятно. По сути, я должен добавить пустые теги tr, чтобы все числа rowspan складывались. Имеет смысл. Спасибо.

HartleySan 31.10.2018 15:00

@Hartleysan - Рад помочь тебе, дружище!

Nikhil Aggarwal 31.10.2018 15:35

Попробуйте это ...

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table td {
    width:60px;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	border-color: black;
}
table th {
    width:60px;
	font-weight: normal;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	border-color: black;
}
table th {
	text-align: left
}
<table class="tg">
  <tr>
    <th rowspan="12">1</th>
    <th rowspan="2">2</th>
    <th rowspan="3">3</th>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">4</td>
  </tr>
  <tr>
    <td rowspan="3">5</td>
  </tr>
  <tr>
    <td rowspan="2">6</td>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">7</td>
    <td rowspan="3">8</td>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">9</td>
  </tr>
  <tr>
    <td rowspan="3">10</td>
  </tr>
  <tr>
    <td rowspan="2">11</td>
  </tr>
</table>

Другие вопросы по теме