html - thead 上的底部边框与 tbody tr 中的边框重叠,表格中的折叠边框
问题描述
我正在使用 HTML 中的表格,我想设置一些样式。我在我的表中添加了一个bottom-border
,thead
并且有一个为tbody tr
它添加边框的活动类。
但是,活动类bottom-border
的thead
重叠border-top
。
这是因为折叠边框,但我需要它,因为悬停tbody tr
不能正常工作。事实上,它增加了每列之间的间隙。
我怎么能解决这个问题?
这是代码:
table {
border-collapse: collapse;
cursor: default;
}
table thead {
border-bottom: 2px solid;
text-align: center;
}
table thead th {
font-weight: normal;
}
table th,
table td {
padding: 5px 10px;
}
table tbody tr:hover {
background-color: grey;
}
table tbody tr.active {
border: 1px solid blue;
}
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</tbody>
</table>
解决方案
最后,我找到了诀窍。我将 a 添加:before
到tbody
and a而box-shadow
不是border-bottom
.thead
table {
border-collapse: collapse;
cursor: default;
}
table thead {
box-shadow: 0 2px grey;
text-align: center;
}
table thead th {
font-weight: normal;
}
table th,
table td {
padding: 5px 10px;
}
table tbody tr:hover {
background-color: grey;
}
table tbody tr.active {
border: 1px solid blue;
}
table tbody:before {
line-height: 0px;
content: "\200C";
display: block;
}
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</tbody>
</table>
推荐阅读
- webpack - 是否可以从 json 文件中导入单个字段?
- javascript - JS 动态 json 数组创建在 IE 11 中不起作用
- swift - 斯威夫特我怎样才能部分改变UILabel的颜色
- asp.net-core - 如何从 JWT 令牌跟踪客户端 ID/应用程序 ID
- r - 资源高效的连接和过滤方法
- apache-kafka - Kafka JDBC 接收器连接器不会实时创建新的 postgreSQL 表
- javascript - 在 Angular 中按顺序显示 toastr 消息
- servlets - 如何在现有的 servlet 项目中添加 swagger
- mysql - XAMPP- MySQL 以 2696 关闭
- android - 将字符串从一个活动发送到另一个活动时,“意图不能为空”