I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed
Although the example has the first column fixed, I'm struggling to extend it to make the four first columns fixed. As a CSS newbie, I would appreciate any help! It seems like it should be simple, but I can't figure it out.
Cascading Style Sheets:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
padding:10px;
width:100px;
}
.col1{
position:absolute;
*position: relative; /*ie7*/
left:0;
width:100px;
}
.col2{
position:absolute;
*position: relative; /*ie7*/
left:100px;
width:100px;
}
.col3{
position:absolute;
*position: relative; /*ie7*/
left:200px;
width:100px;
}
.col4{
position:absolute;
*position: relative; /*ie7*/
left:300px;
width:100px;
}
.outer {position:relative}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:500px;
margin-left:400px;
}
HyperText Markup Language:
<div class="outer">
<div class="inner">
<table>
<tr>
<th class="col1">Header A</th>
<th class="col2">Header A</th>
<th class="col3">Header A</th>
<th class="col4">Header A</th>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td>col 5 - A</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header B</th>
<th class="col2">Header B</th>
<th class="col3">Header B</th>
<th class="col4">Header B</th>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td>col 5 - B</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header C</th>
<th class="col2">Header C</th>
<th class="col3">Header C</th>
<th class="col4">Header C</th>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td>col 5 - C</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
</table>
</div>
</div>
The use of "position:absolute;" ensures the first header column is fixed. By applying different classes (like col1, col2, etc.) with specific positioning values, we can arrange each column without overlap (e.g., 0px for col1, 100px for col2, etc.)
To make certain td tags scrollable, simply assign a class to them and include the CSS property overflow-x:scroll
I am having issues with the CakePdf Plugin (CakePdf.DomPdf) as it is not recognizing my stylesheet. Despite copying my /View/Layouts/default.ctp to /View/Layouts/pdf/default.ctp, the pdf file generated does not reflect the styling. Could this be due to t ...
Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...
I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...
While exploring a tutorial from CSS Tricks about animating section height, I came across a solution that I would like to implement in my Angular 2 application. Here is the function responsible for expanding sections in my app: expandSection(element) { / ...
I'm facing a problem with the jquery .css function. I am using it to retrieve the actual height of elements that have their height set to auto. The code I am currently using is as follows: $(this).css({ height: $(this).css("height"), width: $(this).c ...
I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue wi ...
I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...
My webpage is designed to load two images from a CSS sprite using the following code: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div class="arrow low"></div> ...
I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section. Both the first and last flex items have classes tha ...
Is there a way to perform variable substitution, especially in CSS using JavaScript? I am looking for a solution that offers more features than just variable substitution, such as the LESS syntax. Has anyone come across a JavaScript implementation of LES ...
I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...
I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...
When I assign a specific className to components like <Segment className="Change" color='blue' inverted></Segment> and then in my CSS I apply the following: .Change:hover{ background-color: black; //or any other hover effect } N ...
My modal contains a table with the following code structure. <div> <Table> <tbody> {props.data.map((p) => <> <tr> <th> STC </th> ...
Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...
Looking to target a specific element within a shared class, I'm struggling to find the right method to pinpoint the exact entry of this element. What I need to do is hide the current photo (pic2.jpg) and replace it with another image (pic3.jpg) in the ...
How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...
Is there a way to remove the top border in material-ui Paper component? I've attempted the code below, but it doesn't seem to be effective. <Paper sx={{ border: 0, borderTop: 0, borderRadius: 0, ...
I need a solution for adjusting the layout of a component based on the device it is viewed on. For mobile devices, I want the content to stack vertically like in this example: https://codesandbox.io/s/material-demo-forked-ktoee?file=/demo.tsx. However, o ...
I am looking to enhance the functionality of a toggle button within a web application that was developed using the JS Dojo API. Currently, the button is utilizing dijit.form.ToggleButton, but I need it to include an additional feature for a dropdown menu w ...