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

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

0 голосов
/ 31 октября 2018

Я пытаюсь получить таблицу 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?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

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

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>
0 голосов
/ 31 октября 2018

Вы можете добиться того же, используя следующую структуру 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>
...