HTMLTableColElement: thuộc tính span
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.
Thuộc tính span của giao diện HTMLTableColElement đại diện cho số cột mà <col> hoặc <colgroup> này phải kéo dài; điều này cho phép cột chiếm không gian trên nhiều cột của bảng. Nó phản ánh thuộc tính span.
Giá trị
Một số dương đại diện cho số cột.
Note: Khi đặt giá trị mới, giá trị sẽ bị kẹp về số dương gần nhất (tối đa là 1000).
Ví dụ
Ví dụ này cung cấp hai nút để sửa đổi span cột của ô đầu tiên trong thân bảng.
HTML
html
<table>
<colgroup>
<col />
<col span="2" class="multiColumn" />
</colgroup>
<thead>
<tr>
<th></th>
<th scope="col">C1</th>
<th scope="col">C2</th>
<th scope="col">C3</th>
<th scope="col">C4</th>
</tr>
</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 <col> spans <output>2</output> actual column(s).</div>
CSS
css
.multiColumn {
background-color: #d7d9f2;
}
JavaScript
js
// Lấy các phần tử giao diện liên quan
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 += 1;
// Cập nhật hiển thị
output.textContent = col.span;
});
decreaseButton.addEventListener("click", () => {
col.span -= 1;
// Cập nhật hiển thị
output.textContent = col.span;
});
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # dom-colgroup-span |