Отображение границы строки таблицы при наведении - PullRequest
Новая
       39

Отображение границы строки таблицы при наведении

0 голосов
/ 05 июля 2018

Я работаю с таблицей div, но когда я устанавливаю hover в строке, он не работает, заголовок / .thead все в порядке, но на .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>

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Удаление следующего решит вашу проблему: 

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

}

0 голосов
/ 05 июля 2018

Метод Нисарга работает, но его гораздо проще удалить и добавить только эти две строки из исходного кода. Удалить {border: 1px solid white;} из .divTable .tr

и причина, по которой вы добавили это, вероятно, заключалась в том, что клетки не перемещаются при наведении на них курсора. Просто добавьте {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>
0 голосов
/ 05 июля 2018

Я полагаю, что именно так 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>
...