У меня есть таблица, настроенная так:

enter image description here

Первая строка является строкой заголовка, поэтому она вставляется в область <thead> HTML. Другие строки являются строками тела, поэтому они входят в область <tbody>.

Ячейка 1: 1 имеет <td rowspan="4">

<table>
	<thead>
<tr>
		<td rowspan="4" >
		<p class="body" >Spanned column</p>
		</td>
		<td >
		<p class="body" >Header cell</p>
		</td>
		<td>
		<p class="body" >Header cell</p>
		</td>
		<td>
		<p class="body" >Header cell</p>
		</td>
	</tr></thead>
	<tbody>
	
	<tr>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
	</tr>
	<tr>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
	</tr>
	<tr>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
		<td >
		<p class="body" >Body</p>
		</td>
	</tr>
	</tbody>
	</table>

Мое приложение для редактирования позволяет мне создавать диапазон столбцов, который содержит как заголовки, так и строки тела, но экспорт в HTML не похож на изображение выше: в Antennahouse расширенный столбец обрабатывается как не перекрываемый, поэтому его содержимое помещается в ячейку 1. : 1, который оставляет клетки тела смещенными на один столбец влево.

enter image description here

Firefox также делает беспорядок.

Является ли эта конструкция, т.е. ячейка, которая является частью <thead>, расширяющейся в строки, являющиеся частью <tbody>, допустимой? Я не могу найти ничего в спецификации .

1
Hobbes 29 Окт 2019 в 15:02

2 ответа

Лучший ответ

Я нашел это в спецификации в конце концов:

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

Таким образом, строительство, сделанное моим экспортом, является незаконным.

1
Hobbes 29 Окт 2019 в 12:55

Да, ты можешь.

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

/*Just some css to make the result more pretty*/
th {
    background-color:#AAA;
}
.white{
    background-color:#FFF;
}

td,th{
   padding:5px;
}
<table border=1>
  <tr>
    <th rowspan=7 class="white">This is a big row span</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
0
Bas van Stein 29 Окт 2019 в 12:14
58607092