Spec-Zone.ru › Web APIs

HTMLTableCellElement: свойство rowSpan

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

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

  • Узнать больше
  • Полная совместимость
  • Отправить отзыв

Свойство rowSpan только для чтения интерфейса HTMLTableCellElement представляет количество строк, на которое должна занимать эта ячейка; это позволяет ячейке занимать место в нескольких строках таблицы. Оно отражает атрибут rowspan.

Значение

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

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

Примеры

Этот пример предоставляет две кнопки для изменения интервала строк первой ячейки тела.

HTML

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="2">2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<button id="increase">Increase rowspan</button>
<button id="decrease">Decrease rowspan</button>
<div>The second cell of the first column spans <output>2</output> row(s).</div>

JavaScript

// Obtain relevant interface elements
const row = document.querySelectorAll("tbody tr")[1];
const cell = row.cells[0];
const output = document.querySelectorAll("output")[0];

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

increaseButton.addEventListener("click", () => {
  cell.rowSpan = cell.rowSpan + 1;

  // Update the display
  output.textContent = cell.rowSpan;
});

decreaseButton.addEventListener("click", () => {
  cell.rowSpan = cell.rowSpan - 1;

  // Update the display
  output.textContent = `${cell.rowSpan == 0 ? "all remaining" : cell.rowSpan}`;
});

Результат

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

Спецификация
HTML
# dom-tdth-rowspan

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

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

См. также

  • HTMLTableCellElement.colSpan
  • HTMLTableColElement.span

© 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/HTMLTableCellElement/rowSpan

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API