HTMLTableCellElement：colSpan 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLTableCellElement 接口的 colSpan 只读属性表示此单元格必须跨越的列数；这允许单元格在表格的多列之间占据空间。它反映 colspan 属性。

值

一个表示列数的正数。

备注： 当设置新值时，该值会被钳制到最接近的严格正数。

示例

示例提供了两个按钮来修改主体第一个单元格的列跨度。

HTML

html
<table>
  <thead>
    <tr>
      <th>列 1</th>
      <th>列 2</th>
      <th>列 3</th>
      <th>列 4</th>
      <th>列 5</th>
      <th>列 6</th>
      <th>列 7</th>
      <th>列 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>
<button id="increase">增加列跨度</button>
<button id="decrease">减少列跨度</button>
<div>第一个单元格跨越 <output>2</output> 列。</div>

JavaScript

js
// 获取相关接口元素
const cell = document.querySelectorAll("tbody tr td")[0];
const output = document.querySelectorAll("output")[0];

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

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

  // 更新显示
  output.textContent = cell.colSpan;
});

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

  // 更新显示
  output.textContent = cell.colSpan;
});

结果

规范

Specification
HTML
# dom-tdth-colspan

浏览器兼容性

BCD tables only load in the browser

参见