HTMLTableCellElement：colSpan 属性

基线广泛可用

此功能已经很成熟，并且在许多设备和浏览器版本中都能正常运行。它自 2015 年 7 月.

报告反馈

值

colSpan 是 HTMLTableCellElement 接口的只读属性，表示该单元格必须跨越的列数；这使单元格可以跨越表格的多个列占据空间。它反映了 colspan 属性。

表示列数的正数。

示例

注意：设置新值时，该值会被限制到最近的严格正数。

HTML

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

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
      <th>Col 7</th>
      <th>Col 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">Increase colspan</button>
<button id="decrease">Decrease colspan</button>
<div>The first cell spans <output>2</output> column(s).</div>

table {
  border-collapse: collapse;
}

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

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

JavaScript

html

// Obtain relevant interface elements
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;

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

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

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

js

规范

结果
规范 # HTML 标准

浏览器兼容性

dom-tdth-colspan