РЕДАКТИРОВАТЬ

Чтобы быть более понятным, ниже, что я пытаюсь достичь.

enter image description here


Я пытаюсь создать таблицу, где каждая строка имеет границу в один пиксель с радиусом (имитируя стиль свернутой границы). При наведении курсора на строку я бы хотел, чтобы граница выбранной строки меняла цвет. Я почти достиг этого с помощью следующего кода, но при наведении курсора на ряд следующий ряд уменьшается на 1 пиксель, чтобы освободить место для границы наведения.

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

Есть ли лучший подход к этому?

Спасибо заранее.

1
chut319 24 Окт 2019 в 18:18

3 ответа

Лучший ответ

Обновлено лучшее решение

Не знаю, почему я не решал основную проблему с самого начала, но ваша главная проблема заключалась в том, что элемент ниже был сдвинут, так что вы можете выбрать следующий элемент и установить для верхней границы значение none.

tr:hover + tr td {
    border-top: none;
}

Остальная часть вашего исходного кода остается нетронутой

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

tr:hover + tr td {
    border-top: none;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two dfds</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

Старый ответ

Вы можете сделать это, установив tr для отображения блока. Я использовал margin-top -1px, чтобы скрыть лишнюю границу. Для упрощения я удалил рамку из td и просто поместил ее на tr, так как у вас все равно нет границ между tds

Z-индекс при наведении делает всплывающий элемент всплывающим с границей

Я положил отрицательное поле на все tr, но первое, вы, вероятно, могли бы сойти с него на всех tr с

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  padding: 10px;
}

tr {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
  box-sizing: border-box;
  position: relative;
}

tr:not(:first-child) {
  margin-top: -1px;
}

tr:hover {
  z-index: 2;
  border: 1px solid blue;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
2
Huangism 24 Окт 2019 в 17:17

Удалить границы снизу: 0; в тд тэге

table {
  border-collapse: separate;
  border-spacing: 0;
  z-index:0;
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
  border-bottom: 0;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover td{
  border-color: #12A0F8;
  border-bottom: solid 1px #12A0F8;
  padding-bottom: 9px;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
0
Jone Milka 25 Окт 2019 в 03:40

РЕДАКТИРОВАТЬ: Включает CSS var() и обновляет разметку HTML, чтобы включить эту переменную.

Вам нужно удалить свойство border-width при наведении курсора и просто использовать border-color. Вам также необходимо перекрыть элементы tr, чтобы граница казалась одним пикселем.

Я обновил ответ, чтобы использовать z-index и отрицательное top значение. Будьте осторожны, это будет работать только с тремя tr элементами. Если вам нужно динамическое решение, ответ может быть обновлен в зависимости от того, как вы генерируете таблицу.

table {
  border-collapse: separate;
  border-spacing: 0;
}

tr {
  position: relative;
  z-index: 1;
  top: var(--rowCount);
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover {
  /*background-color: #cad6ed;*/
  z-index: 5;
}

tr:hover td {
  border-color: #12A0F8;
  border-style: solid none;
  padding: 10px;
}

tr:hover td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
<table>
  <tr style="--rowCount: 0px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -1px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -2px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -3px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

https://jsfiddle.net/disinfor/nhp3o8xw/31/

1
disinfor 24 Окт 2019 в 17:09
58544396