HTMLTableColElement: свойство span

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Чтение только свойство span интерфейса HTMLTableColElement представляет собой количество столбцов, которое должен охватывать этот <col> или <colgroup>; это позволяет столбцу занимать место в нескольких столбцах таблицы. Оно отражает атрибут span.

Значение

Положительное число, представляющее количество столбцов.

Примечание: При установке нового значения оно ограничивается ближайшим строго положительным числом (до 1000).

Примеры

В этом примере показаны две кнопки для изменения охвата столбца первой ячейки тела.

HTML

<table>
  <colgroup>
    <col />
    <col span="2" class="multiColumn" />
  </colgroup>
  <thead>
    <th></th>
    <th scope="col">C1</th>
    <th scope="col">C2</th>
    <th scope="col">C3</th>
    <th scope="col">C4</th>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row 1</th>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<button id="increase">Increase column span</button>
<button id="decrease">Decrease column span</button>
<div>The first &lt;col&gt; spans <output>2</output> actual column(s).</div>

CSS

.multiColumn {
  background-color: #d7d9f2;
}

JavaScript

// Obtain relevant interface elements
const col = document.querySelectorAll("col")[1];
const output = document.querySelectorAll("output")[0];

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
  col.span = col.span + 1;

  // Update the display
  output.textContent = col.span;
});

decreaseButton.addEventListener("click", () => {
  col.span = col.span - 1;

  // Update the display
  output.textContent = col.span;
});

Результат

Спецификации

Спецификация
HTML # dom-colgroup-span

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`span`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4

См. также

HTMLTableCellElement.colSpan

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableColElement/span