📅 最后修改于: 2023-12-03 15:38:10.173000 🧑 作者: Mango
在很多场合，我们需要展示一些关键信息，而表格是一个非常方便的方式，尤其是当数据比较多时。在本文中，我们将介绍如何利用HTML、CSS和JavaScript创建一个具有固定标题和可滚动正文的表格。
首先，我们需要一个包含表格标题和正文的HTML文件。在这里，我们的标题是固定的，而正文是可滚动的。下面是一个HTML模板：
<!DOCTYPE html>
<html>
<head>
<title>Table with Fixed Header and Scrollable Body</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<h1>Table with Fixed Header</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<!-- Table body goes here -->
</tbody>
</table>
<script>
// JavaScript code goes here
</script>
</body>
</html>
在这个HTML文件中，我们定义了一个标题 h1 和一个包含标题行和正文的表格 table。标题行包含了10个不同的 th 元素。正文将在数据加载时动态生成。
接下来，我们需要一个CSS文件来定义我们的表格样式。我们需要为标题和正文设置不同的CSS样式，以便我们可以将它们固定和滚动。以下是我们添加的CSS样式：
/* Set the overall style for the heading and table */
h1, table {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* Set the style for the table header */
thead {
display: table;
table-layout: fixed;
width: 100%;
background-color: #ddd;
}
/* Set the style for the table body */
tbody {
display: block;
height: 300px;
overflow-y: scroll;
}
/* Set the style for the table rows */
tr {
display: table;
table-layout: fixed;
width: 100%;
border-bottom: 1px solid #ddd;
}
/* Set the style for the table cells */
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
/* Set the style for the first column */
th:first-child, td:first-child {
text-align: left;
}
在上述CSS样式中，我们为标题、表格、表头、表格正文、表格行和表格单元格分别设置不同的CSS样式。我们还为第一列单元格设置了一个左对齐样式。
最后，我们需要一些JavaScript代码来将数据加载到我们的表格中。下面是我们添加的JavaScript代码：
// Data for the table
var data = [
['Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3', 'Row 1 Column 4', 'Row 1 Column 5', 'Row 1 Column 6', 'Row 1 Column 7', 'Row 1 Column 8', 'Row 1 Column 9', 'Row 1 Column 10'],
['Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3', 'Row 2 Column 4', 'Row 2 Column 5', 'Row 2 Column 6', 'Row 2 Column 7', 'Row 2 Column 8', 'Row 2 Column 9', 'Row 2 Column 10'],
['Row 3 Column 1', 'Row 3 Column 2', 'Row 3 Column 3', 'Row 3 Column 4', 'Row 3 Column 5', 'Row 3 Column 6', 'Row 3 Column 7', 'Row 3 Column 8', 'Row 3 Column 9', 'Row 3 Column 10'],
['Row 4 Column 1', 'Row 4 Column 2', 'Row 4 Column 3', 'Row 4 Column 4', 'Row 4 Column 5', 'Row 4 Column 6', 'Row 4 Column 7', 'Row 4 Column 8', 'Row 4 Column 9', 'Row 4 Column 10'],
['Row 5 Column 1', 'Row 5 Column 2', 'Row 5 Column 3', 'Row 5 Column 4', 'Row 5 Column 5', 'Row 5 Column 6', 'Row 5 Column 7', 'Row 5 Column 8', 'Row 5 Column 9', 'Row 5 Column 10']
];
// Get the table body element
var tbody = document.querySelector('tbody');
// Generate the table rows and cells
for (var i = 0; i < data.length; i++) {
// Add a new row to the table
var row = document.createElement('tr');
// Add the cells to the row
for (var j = 0; j < data[i].length; j++) {
var cell = document.createElement('td');
cell.textContent = data[i][j];
row.appendChild(cell);
}
// Add the row to the tbody element
tbody.appendChild(row);
}
这个JavaScript代码将根据我们提供的数据生成表格正文中的单元格。我们定义了一个数据数组 data，它包含了五个数组，每个数组都包含了十个元素。我们使用一个循环来遍历这个数组，并为每个数组中的元素创建一个单元格。我们还为每个单元格添加了文本内容，并将它们添加到新行中。最后，我们将新行添加到表格正文中。
下面是完整的Markdown代码片段，它展示了如何创建具有固定标题和可滚动正文的表格：
# Table with Fixed Header and Scrollable Body
<!DOCTYPE html>
<html>
<head>
<title>Table with Fixed Header and Scrollable Body</title>
<style>
/* CSS styles go here */
</style>
</head>
<body>
<h1>Table with Fixed Header</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<!-- Table body goes here -->
</tbody>
</table>
<script>
// JavaScript code goes here
</script>
</body>
</html>
/* Set the overall style for the heading and table */
h1, table {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* Set the style for the table header */
thead {
display: table;
table-layout: fixed;
width: 100%;
background-color: #ddd;
}
/* Set the style for the table body */
tbody {
display: block;
height: 300px;
overflow-y: scroll;
}
/* Set the style for the table rows */
tr {
display: table;
table-layout: fixed;
width: 100%;
border-bottom: 1px solid #ddd;
}
/* Set the style for the table cells */
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
/* Set the style for the first column */
th:first-child, td:first-child {
text-align: left;
}
// Data for the table
var data = [
['Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3', 'Row 1 Column 4', 'Row 1 Column 5', 'Row 1 Column 6', 'Row 1 Column 7', 'Row 1 Column 8', 'Row 1 Column 9', 'Row 1 Column 10'],
['Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3', 'Row 2 Column 4', 'Row 2 Column 5', 'Row 2 Column 6', 'Row 2 Column 7', 'Row 2 Column 8', 'Row 2 Column 9', 'Row 2 Column 10'],
['Row 3 Column 1', 'Row 3 Column 2', 'Row 3 Column 3', 'Row 3 Column 4', 'Row 3 Column 5', 'Row 3 Column 6', 'Row 3 Column 7', 'Row 3 Column 8', 'Row 3 Column 9', 'Row 3 Column 10'],
['Row 4 Column 1', 'Row 4 Column 2', 'Row 4 Column 3', 'Row 4 Column 4', 'Row 4 Column 5', 'Row 4 Column 6', 'Row 4 Column 7', 'Row 4 Column 8', 'Row 4 Column 9', 'Row 4 Column 10'],
['Row 5 Column 1', 'Row 5 Column 2', 'Row 5 Column 3', 'Row 5 Column 4', 'Row 5 Column 5', 'Row 5 Column 6', 'Row 5 Column 7', 'Row 5 Column 8', 'Row 5 Column 9', 'Row 5 Column 10']
];
// Get the table body element
var tbody = document.querySelector('tbody');
// Generate the table rows and cells
for (var i = 0; i < data.length; i++) {
// Add a new row to the table
var row = document.createElement('tr');
// Add the cells to the row
for (var j = 0; j < data[i].length; j++) {
var cell = document.createElement('td');
cell.textContent = data[i][j];
row.appendChild(cell);
}
// Add the row to the tbody element
tbody.appendChild(row);
}