# Gray out certain column

**URL:** <https://community.elfsight.com/t/gray-out-certain-column/91253>\
**Category:** Pricing Table\
**Created:** [December 24, 2024, 6:21pm UTC](https://community.elfsight.com/t/gray-out-certain-column/91253 "2024-12-24T18:21:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 24, 2024, 6:21pm UTC](https://community.elfsight.com/t/gray-out-certain-column/91253/1 "2024-12-24T18:21:15Z")

</div>

Add this code to the Custom CSS field on the Appearance tab of your [Pricing Table](https://elfsight.com/pricing-table-plugin/) widget’s settings:

**Grid:**

```auto
.es-column-container:nth-child(1) {
  opacity: 0.5;
}

```

  

**Carousel:**

```auto
.es-layout-carousel-grid .es-column-container:nth-child(1),
.es-snap-carousel-item:nth-child(1) {
  opacity: 0.5;
}

```

  

**Classic Table:**

```auto
.es-layout-classic-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(1) *,
.es-snap-carousel-item:nth-child(1) * {
  opacity: 0.5;
}

```

  

**Comparison Table:**

```auto
.es-layout-comparison-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(2) *,
.es-layout-comparison-table-snap-carousel .es-snap-carousel-item:nth-child(2) *,
.es-layout-comparison-table-mobile-snap-carousel .es-snap-carousel-item:nth-child(1) * {
  opacity: 0.5;
}

```

  

Replace 1 with the number of the needed column:

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/c/2cafed7ab25f7bb5c9aba2a63d7e5f61a47e3efa.png)