HTML表格是一种非常常见的网页元素，用于展示数据和信息，在HTML中，我们可以通过使用<table>、<tr>、<td>等标签来创建表格，有时候我们可能只想在表格的中间显示一条竖线，而不是整个表格都有边框，如何在HTML表格中实现这个效果呢？
1. 使用CSS样式
我们可以使用CSS样式来实现这个效果，我们需要为表格添加一个类名，例如my-table，我们可以在CSS中定义这个类名的样式，只设置中间的竖线。
<!DOCTYPE html>
<html>
<head>
<style>
.my-table {
border-collapse: collapse;
}
.my-table td {
border: none;
}
.my-table tr:nth-child(even) td:first-child,
.my-table tr:nth-child(even) td:last-child {
border-left: 1px solid black;
border-right: 1px solid black;
}
</style>
</head>
<body>
<table class="my-table">
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</table>
</body>
</html>
在这个例子中，我们首先将表格的边框折叠（border-collapse: collapse;），然后移除所有单元格的边框（border: none;），接下来，我们使用:nth-child()选择器选中偶数行的第一个和最后一个单元格，并设置它们的左右边框，这样，我们就实现了只在表格中间显示一条竖线的效果。
2. 使用JavaScript动态生成表格
除了使用CSS样式，我们还可以使用JavaScript动态生成表格，这样，我们可以更加灵活地控制表格的样式，以下是一个使用JavaScript动态生成表格的例子：
<!DOCTYPE html>
<html>
<head>
<script>
function createTable() {
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var th = document.createElement('th');
th.innerHTML = '标题';
tr.appendChild(th);
tr.appendChild(document.createElement('th')); // 添加一个空列，以便在中间显示竖线
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < 5; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 2; j++) {
var td = document.createElement('td');
td.innerHTML = '数据' + (i * 2 + j + 1);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
</script>
</head>
<body onload="document.body.appendChild(createTable());">
</body>
</html>
在这个例子中，我们首先定义了一个createTable()函数，用于创建表格，在这个函数中，我们使用document.createElement()方法创建表格、表头、表体和单元格元素，我们将这些元素添加到表格中，并返回表格，我们在页面加载完成后调用这个函数，将创建的表格添加到页面中，这样，我们就实现了只在表格中间显示一条竖线的效果。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/337284.html
微信扫一扫 