带有固定标题和固定列的HTML表格？
固定标题和固定列的HTML表格可以使用CSS和JavaScript来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Fixed Header Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</tbody>
</table>
<script>
// Fix the header table
var table = document.getElementsByTagName('table')[0];
var headerCells = table.getElementsByTagName('th');
for (var i = 0; i < headerCells.length; i++) {
var headerCell = headerCells[i];
var nextCell = headerCell.nextSibling;
if (nextCell.nodeType === Node.TEXT_NODE) {
// If the next cell is a text node, insert a blank cell after the header cell
var newCell = document.createElement('td');
newCell.colSpan = 2;
headerCell.parentNode.insertBefore(newCell, nextCell);
headerCell.remove();
}
}
</script>
</body>
</html>这个代码会生成一个带有固定标题和固定列的HTML表格。它会在表格的每一行末尾插入一个额外的单元格，以填补表格的宽度。这个表格还有一个“全宽”模式，可以通过单击表格中的“全宽”按钮来启用。在“全宽”模式下，表格会占据页面的整个宽度。
云服务器
ICP备案
实时音视频
对象存储
云直播
