This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row.
I only want use CSS for this.
Can anyone give me a solution for this?
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
}
.table>* {
background: gray;
padding: 10px;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}
<div class="table">
<div class="heading">Title 1</div>
<div class="heading">Title 2</div>
<div class="heading">Title 3</div>
<div class="heading">Title 4</div>
<div class="heading">Title 5</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 2</div>
<div class="row">Row 2</div>
<div class="row">Row 2</div>
<div class="row">Row 2</div>
<div class="row">Row 2</div>
<div class="row">Row 3</div>
<div class="row">Row 3</div>
<div class="row">Row 3</div>
<div class="row">Row 3</div>
<div class="row">Row 3</div>
</div>
The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.
To align the item horizontally within the grid, we use the justify-content property and set it to center . With justify-content we can align the columns start , end , stretch or center .
Just use width: 100% and height: 100% in the CSS class of the item you want to fill the grid.
Since you are treating this as a table, where the elements stay in the same row, you can also wrap each row in a DIV with "display" set to "contents." This forms an innocuous parent element that you use for hover, and then style the child elements. (display: contents is not yet supported in Edge, though.)
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
overflow: hidden;
background: gray;
}
.table .row, .table .heading{
padding: 10px;
position: relative;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}
.row span {
position: relative;
z-index: 2;
}
.rowWrapper{
display: contents;
}
.rowWrapper:hover > div{
background-color: orange;
}
<div class="table">
<div class="heading">Title 1</div>
<div class="heading">Title 2</div>
<div class="heading">Title 3</div>
<div class="heading">Title 4</div>
<div class="heading">Title 5</div>
<div class="rowWrapper">
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
</div>
<div class="rowWrapper">
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
</div>
<div class="rowWrapper">
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
</div>
</div>
Here is a trick using pseudo-element. The idea is to use the element as a background and make it overflow on the left and right so that it will cover all the row. Like that if you hover on any element inside a row you change the color and it's like you changed the color of the whole row.
This trick involve few changes on the markup and also more CSS.
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
overflow: hidden;
background: gray;
}
.table>* {
padding: 10px;
position: relative;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}
.row span {
position: relative;
z-index: 2;
}
.row:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1000%;
left: -1000%;
z-index: 1;
}
.row:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 1px;
z-index: 2;
background-color: #fff;
}
.row:nth-child(5n+5)::after {
bottom: -1px;
right: 0;
left: -1000%;
height: 1px;
z-index: 3;
width: auto;
top: auto;
background-color: #fff;
}
.row:hover::before {
background-color: red;
}
<div class="table">
<div class="heading">Title 1</div>
<div class="heading">Title 2</div>
<div class="heading">Title 3</div>
<div class="heading">Title 4</div>
<div class="heading">Title 5</div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 1</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 2</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
<div class="row"><span>Row 3</span></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With