Row Borders for Header Row in Comparison Table Layout

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?

1 Like

@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:

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


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-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: