Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/HTMLTableColElement/span below:

HTMLTableColElement：span 属性 - Web API

Baseline Widely available

HTMLTableColElement 接口的 span 只读属性表示 <col> 或 <colgroup> 必须横跨的列数；这使得该列占据表中多列的空间。它反映 span 属性。

一个表示列数的正数。

备注： 设置新值时，该值将被限制为最接近的严格正数（最多 1000）。

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

<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">行 1</th>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<button id="increase">增加列跨度</button>
<button id="decrease">减少列跨度</button>
<div>第一个 &lt;col&gt; 横跨 <output>2</output> 个实际列。</div>

table {
  border-collapse: collapse;
}

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

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

.multiColumn {
  background-color: #d7d9f2;
}

// 获取相关接口元素
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;

  // 更新显示
  output.textContent = col.span;
});

decreaseButton.addEventListener("click", () => {
  col.span = col.span - 1;

  // 更新显示
  output.textContent = col.span;
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4