This dynamic table is created using div elements and allows horizontal scrolling. Each row in the table can be collapsed to reveal additional rows with two images for better visualization. The dropdown menu should have a z-index of 9999, making it appear above all other elements, including the table. However, the dropdown menu cannot float as it needs to stay below the action button represented by three dots.
The following requirements need to be met: 1. The table should support N number of columns for horizontal scrolling. 2. The action button (represented by three points) must remain fixed on the right side to ensure visibility even when scrolling horizontally. 3. Collapsing each element in the table is necessary as workflows contain stages and related activities.
To see an example of this functionality without copying the styles, you can visit:
For visual references:
:root {
--customColor: #FFFFFF;
--secondaryColor: #CCCCCC;
/* Add more CSS variables here */
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: var(--customColor);
/* Additional body styling */
}