Как сделать таблицу с таким ховером?

Question

[Ratibor]

Доброе время суток! Подскажите как реализовать таблицу с таким ховером на всю ширину экрана?

Answer 1

[Eugene Chefranov]

table tr:hover {
background-color:#CCC;
}

Comments

[Ratibor]

это понятно но ховер в таблице будет, а надо на всю ширину экрана

[Eugene Chefranov]

Ratibor, не на всю таблицу, а только на строку

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, est.</td>
  </tr>
  <tr>
    <td>Voluptatum odio nulla expedita minima cum? Culpa cum iure laudantium.</td>
  </tr>
  <tr>
    <td>Ullam, aliquid nobis modi consequatur ab eum sapiente maiores obcaecati.</td>
  </tr>
  <tr>
    <td>Ducimus consequatur necessitatibus ipsam nam sapiente nemo odio libero excepturi!</td>
  </tr>
  <tr>
    <td>Earum, in. Quasi, ipsam voluptates quidem nihil sunt debitis sapiente?</td>
  </tr>
</table>

table {
  width: 100%;
}

table td {
  padding: 10px;
}

table tr {
  background-color: #f1f1f1;
}

table tr:nth-child(odd) {
  background-color: #f6f6f6;
}

table tr:hover {
  background-color: #CCC;
}

[Eugene Chefranov]

Ratibor, если вы имеете ввиду про это


то сделайте столбики пустые по краям

[Ratibor]

https://codepen.io/RatiboR1978/pen/oyyYqK а отступы как реализовать справа и слева, а ховер на эти отступы чтобы заходил

[Ratibor]

точно!!!!!!!!!! Спасибо!!!!!!!

Answer 2

[yakupov112]

table tr:hover td {
background-color: #fdede6;
}

Comments

[Ratibor]

ховер в таблице будет, а надо на всю ширину экрана