悬停时显示 table-row 边框
Displaying table-row border on hover
我使用 div table,但是当我在行上设置 hover 时,它不起作用,header / .thead可以,但是在.tbody上不行,hover只显示left border、右边框和下边框,我是不是忘记了什么?如何解决?这是我的代码:
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
border: 1px solid white;
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
border-top: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>
我相信这就是 border-collapse
的工作原理,因为上部单元格的底部边框折叠到底部单元格的顶部边框中。
解决此问题的方法之一是在 .td
元素上指定边框。因此,您将分别为所有 .td
单元格提供顶部和底部边框,并分别为 :first-child
和 :last-child
提供左右边框。这将有效地实现你想要的。
.divTable .tr:hover .td {
border-top: 1px solid rgba(124, 204, 243, 0.58);
border-bottom: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:first-child {
border-left: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:last-child {
border-right: 1px solid rgba(124, 204, 243, 0.58);
}
这里有一个片段展示了它的外观:
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
border: 1px solid white;
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
.divTable .tr:hover .td {
border-top: 1px solid rgba(124, 204, 243, 0.58);
border-bottom: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:first-child {
border-left: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:last-child {
border-right: 1px solid rgba(124, 204, 243, 0.58);
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>
删除以下内容将解决您的问题:
.divTable .tr {
border: 1px solid white;
}
Nisarg 的方法有效,但从原始代码中删除和添加这两行要简单得多。
从 .divTable .tr
中移除 {border: 1px solid white;}
你添加这个的原因可能是当你将它们悬停时,单元格不会四处移动。只需将 {border: 1px solid transparent;} 添加到 .divTable
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
border: 1px solid transparent;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
border-top: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>
我使用 div table,但是当我在行上设置 hover 时,它不起作用,header / .thead可以,但是在.tbody上不行,hover只显示left border、右边框和下边框,我是不是忘记了什么?如何解决?这是我的代码:
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
border: 1px solid white;
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
border-top: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>
我相信这就是 border-collapse
的工作原理,因为上部单元格的底部边框折叠到底部单元格的顶部边框中。
解决此问题的方法之一是在 .td
元素上指定边框。因此,您将分别为所有 .td
单元格提供顶部和底部边框,并分别为 :first-child
和 :last-child
提供左右边框。这将有效地实现你想要的。
.divTable .tr:hover .td {
border-top: 1px solid rgba(124, 204, 243, 0.58);
border-bottom: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:first-child {
border-left: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:last-child {
border-right: 1px solid rgba(124, 204, 243, 0.58);
}
这里有一个片段展示了它的外观:
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
border: 1px solid white;
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
.divTable .tr:hover .td {
border-top: 1px solid rgba(124, 204, 243, 0.58);
border-bottom: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:first-child {
border-left: 1px solid rgba(124, 204, 243, 0.58);
}
.divTable .tr:hover .td:last-child {
border-right: 1px solid rgba(124, 204, 243, 0.58);
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>
删除以下内容将解决您的问题:
.divTable .tr {
border: 1px solid white;
}
Nisarg 的方法有效,但从原始代码中删除和添加这两行要简单得多。 从 .divTable .tr
中移除 {border: 1px solid white;}你添加这个的原因可能是当你将它们悬停时,单元格不会四处移动。只需将 {border: 1px solid transparent;} 添加到 .divTable
.divTable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
border: 1px solid transparent;
}
.divTable .tr {
display: table-row;
}
.divTable .thead {
display: table-header-group;
}
.divTable .td,
.th {
display: table-cell;
padding: 3px 10px;
}
.divTable .thead {
display: table-header-group;
font-weight: bold;
}
.divTable .tfoot {
display: table-footer-group;
font-weight: bold;
}
.divTable .tbody {
display: table-row-group;
}
.divTable {
font-size: 12px;
cursor: default;
width: 100%;
}
.divTable .th,
.divTable .td {
padding: 4px 6px;
}
.divTable .tr {
height: 26px;
}
.divTable .tr:hover {
background-color: rgba(162, 216, 242, 0.14);
border: 1px solid rgba(124, 204, 243, 0.58);
border-top: 1px solid rgba(124, 204, 243, 0.58);
height: 26px;
}
<div class="divTable">
<div class="thead">
<div class="tr">
<div class="th">Filename</div>
<div class="th">Type</div>
<div class="th">Size</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">Why Cannot Work.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Lorem Ipsum.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
<div class="tr">
<div class="td">Dolor Sir Amet.jpg</div>
<div class="td">Image</div>
<div class="td">12.1 KB</div>
</div>
</div>
</div>