Row Borders for Header Row in Comparison Table Layout

Ask the Community Customization
1

When creating a long feature list in the comparison table layout, its hard to determine which feature belongs with which row in a big table. It begins to look very cluttered. To fix this, the table borders and shading need to extend to the header column.

Basically, how do I get my comparison table to look like the example on ElfSight’s website (image included here). where the header row has row borders that extend to the whole table?

pricing-table-features-layouts-3
pricing-table-features-layouts-31270×492 21.4 KB

1 Like
2

@Daniel This code should do the trick:

.eapps-pricing-table-column-1 {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 0 1px rgb(0 0 0 / 5%);
z-index: 2;
}
.eapps-pricing-table-column-features-left .eapps-pricing-table-column-features-item:nth-child(2n-1):after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .05;
pointer-events: none;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Give it a try and let me know if you like what you see :slightly_smiling_face:

3

Max, thank you so much for the code and quick reply! That code works perfectly to add stripes to the header column! :smiley:

2 Likes
4

Hi @Daniel :wave:

Glad to hear that the code worked for you! And here is the solution to align text in the Head Column:

.eapps-pricing-table-column-head
  .eapps-pricing-table-column-features-item-inner,
.eapps-pricing-table-column-head-mobile-inner
  .eapps-pricing-table-column-features-item-inner {
  text-align: center !important;
  justify-content: center;
}

Check it out and let me know if you like what you see :slightly_smiling_face: