HTMLTableCellElement: rowSpan 属性

基线广泛可用

此功能已得到很好的确立，并且可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2015 年 7 月.

rowSpan 是 HTMLTableCellElement 接口的只读属性，表示此单元格必须跨越的行数；这允许单元格占用表格中多行的空间。它反映了 rowspan 属性。

值

一个表示行数的正数。如果它是 0，则表示该列中所有剩余的行。

注意：设置新值时，不同于 0 的值将钳位到最接近的严格正数。

示例

此示例提供了两个按钮，用于修改主体第一个单元格的行跨度。

HTML

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>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。