HTMLTableColElement: span 属性

基线广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

值

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>

table {
  border-collapse: collapse;
}

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

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

CSS

html

.multiColumn {
  background-color: #d7d9f2;
}

JavaScript

css

// 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;
});

js

规范

结果
规范 # HTML 标准

浏览器兼容性

dom-colgroup-span

另请参阅

HTMLTableCellElement.colSpan