极客观点
项目管理
HarmonyOS
通过 CSS 移除边框, 在移动端依然可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.custom-table {
font-size: 12px;
width: 100%;
text-align: center;
border-collapse: collapse;
}
.custom-table th,
.custom-table td {
padding: 12px 0;
}
.custom-table th,
.custom-table td {
border: none;
}
.custom-table tbody th {
font-weight: normal;
}
.custom-table thead {
font-weight: 500;
background-color: #0085d1;
}
.custom-table thead th,
.custom-table thead td {
background-color: #0085d1;
}
</style>
</head>
<body>
<table class="custom-table" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>asdsa</th>
<th>asd</th>
<th>asd</th>
<th>asdsad</th>
</tr>
</thead>
<tbody>
<tr>
<th>sadsad</th>
<td rowspan="2">sadsa</td>
<td>as.7</td>
<td rowspan="2">asdsa</td>
</tr>
<tr>
<th>sada</th>
<td>1.asd</td>
</tr>
<tr>
<th>sadsa</th>
<td rowspan="2">sadsa</td>
<td>asdsa</td>
<td rowspan="2">asd</td>
</tr>
<tr>
<th>sadas</th>
<td>sadsa</td>
</tr>
</tbody>
</table>
</body>
</html>
- Edge/Chrome latest ｜ MacOS 13+
- 或者手机打开通过手势放大缩小。
html5
移动端没有复现啊？提供一下复现设备型号？
考虑给
tabler元素添加一个border="0"的属性？看起来像是
border-collapse和border-spacing造成的间距问题，缩放之后没有完全贴合导致出现了一条间隙中间就会出现浅色竖条（其实也是因为半像素渲染的问题。实际分辨率好一些的显示器这个问题应该就解决了。）。可以看到给
table整体设置background后这个竖条就会消失了。