Пробел в конце каждой строки, когда ячейки таблицы с положением закреплены - PullRequest
Новая
       39

Пробел в конце каждой строки, когда ячейки таблицы с положением закреплены

0 голосов
/ 05 февраля 2020

Мне нужна таблица, в которой у каждой строки есть свои кнопки действий, которые видны только при наведении на строку.

Я использовал position: sticky в последней строке каждой строки td:

enter image description here

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

enter image description here

Есть какой-то обходной путь для удаления этого пробела в конце строки? Мне нужно что-то вроде position: fixed относительно каждой строки.

HTML: 

  <table>
      <tr>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td class="actions"> Célula de ações </td>
      </tr>
      <tr>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td class="actions"> Célula de ações </td>
      </tr>
      <tr>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td class="actions"> Célula de ações </td>
      </tr>
      <tr>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td> Célula de dados </td>
          <td class="actions"> Célula de ações </td>
      </tr>

  </ŧable>

CSS: 

<style>
    .wrapper {
        width: 500px;
        overflow: auto;
    }
    table {
        border-collapse: collapse;
    } 
    td {
        height: 40px;
        border: 1px solid black;
        padding: 10px;
        min-width: 150px;
    }
    tr:hover .actions {
        display: table-cell;
    }
    .actions {
        position: sticky;
        right: 0;
        top: 0;
        background: #333;
        color: #fff;
        display: none;
    }

</style>
...