The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability.

Here is my attempted solution:

.preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
}
<table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>

The above code works as intended. However, adding content before the table causes issues.

.preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>

The issue arises due to the usage of position: absolute within the preview class. Let's explore a better approach to achieve the desired outcome.

css

Answer №1

Give this code a shot

I made a switch from using top: 0 to bottom:0 within .preview

Enclosed both table and 

<div class="preview"></div>
in a div with the styling of position:relative;

.preview {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 25%,rgba(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 );
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    transition: all 0.3s;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<div style="position:relative;">
<table>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
    <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>
<div class="preview"></div>
</div>

Answer №2

It is important to note that an absolute element will always be positioned relative to the nearest parent with a position: relative

To address this issue, you can utilize a :before pseudo-element instead of using the preview div

table {
  position: relative;
}

table.preview:before {
  content: "";
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000', GradientType=0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  transition: all 0.3s;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, et, cumque. Explicabo consectetur accusamus enim aspernatur veritatis facilis dolores ex necessitatibus beatae aliquam voluptatem debitis eaque neque, consequatur dolorem tenetur! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Expedita amet sequi, velit inventore aliquid in dicta ipsum fugiat recusandae iusto distinctio commodi est, asperiores neque hic consequuntur minima, sapiente numquam? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quidem nobis ex soluta eos deleniti, explicabo repellendus repellat rem aliquam quibusdam. Quo, qui, magni! Aperiam illum similique, id, dolor tenetur qui!
<table class="preview">
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

Navbar optimization by eliminating unnecessary whitespace at the end

I'm working on a navigation bar that has four links. I need to get rid of the extra space to the left of "Projects" and to the right of "Contact." It seems like this spacing is part of the unordered list structure, rather than padding or margin. Chec ...

cssnavbarnav

Exploring the wilderness: Safari with a twist of negative margin

Dealing with two values, "price" and "old price". When displaying the "old price", I need to cross it out with a line that is thinner than the default text-decoration: line-through. Below is the code snippet: HTML: <span class="price"> <span c ...

htmlcsssafarimargintext-decorations

Establish a background image that can be scrolled

Currently, I am working on a project and have created a fiddle that can be accessed here: https://jsfiddle.net/0g3u8452/1/ The image I am using is 1920x4000, and I want it to span the full width of the screen similar to setting background-size ...

htmlcss

What is the process for integrating CSS-styled text into CKEditor?

Currently, I am developing plugins that are designed to incorporate various elements like images and tables into the editor. My objective is to be able to view these elements in their final visual form within the editor itself. To achieve this, I plan on a ...

cssckeditor

Difficulty encountered while setting up jQuery slider

I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...

javascriptjquerycsshtml

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

htmlcss

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

cssangularqueryselectorng-deep

Navigating to a particular div using a click event

I am trying to achieve a scrolling effect on my webpage by clicking a button that will target a specific div with the class "second". Currently, I have implemented this functionality using jQuery but I am curious about how to accomplish the same task using ...

javascriptjqueryhtmlcssscroll

Enhance your PrimeVue experience with the power of Tailwind CSS

After installing PrimeVue, I encountered an issue where the component style was not working, but Tailwind CSS was functioning correctly. It seems that when I install Tailwind first, it works fine until I add Primevue's button component, which then cau ...

htmlcssvue.jstailwind-cssprimevue

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

csstypescript

Optimal method for creating a seamless loop of animated elements passing through the viewport

My challenge involves managing a dynamic set of elements arranged next to each other in a row. I envision them moving in an infinite loop across the screen, transitioning seamlessly from one side to the other, as illustrated here: https://i.stack.imgur.com ...

javascriptcssanimationgraphicsgsap

I am encountering an issue where the characters "£" is displaying as "£" when my HTML is rendered. Can anyone explain why this is happening?

Here is the code I'm having trouble with: http://pastebin.com/QBLeLyNq. For some reason, the "code" part isn't working correctly. Any help would be appreciated. I used to run a small business and had a profit of £145 with an investment of only ...

htmlcssencoding

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file. Here is the script: var loader = document.getElementById("ld"); w ...

javascripthtmlcssbootstrap-5

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...

javascriptjqueryhtmlcss

Having trouble with the Bootstrap float right class? Your buttons are refusing to respond?

Currently, I am experimenting with ExpressJS and EJS rendering. I have noticed that the Bootstrap float-right class is not working properly on the navbar. I even attempted using d-flex, but the issue persists. I am unsure if I am missing something in my co ...

cssnode.jsexpressbootstrap-4ejs

Center a Bootstrap 4 card both vertically and horizontally without overflowing the screen

I am facing an issue with a single page layout where I have a centrally positioned card containing a form and text. Once the form is submitted, a list is displayed. However, sometimes the list is lengthy causing the card to cut off at the top with no scrol ...

csstwitter-bootstrapbootstrap-4

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

phpjavascripthtmlcss