Question

我使用div表，但是当我在行上设置 hover 时，它不起作用，标题/ .thead 没问题，但是在< strong> .tbody 无效，悬停仅显示左边框，右边框和底边框，我是否忘了什么？怎么解决呢？这是我的代码：

.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>

Answer 1

我相信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>

Answer 2

Nisarg的方法有效，但是从原始代码中删除并仅添加这两行要简单得多。从.divTable .tr

移除{border：1px solid white;}

和您添加此内容的原因可能是因为当您将它们悬停时，它们不会移动。只需将{border：1px solid transparent;}添加到.divTable

apply plugin: 'com.android.application'

.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;
}

Answer 3

删除以下内容将解决您的问题：

.divTable .tr {
 border: 1px solid white;

}

在悬停时显示表格行边框

3 个答案: