Column on the far right of the grid with a frozen position

I need to design an Angular grid where the last column remains frozen. This frozen column should display the summation of all row values, and the last row should be editable. I am able to create the Angular grid itself, but I am struggling with how to structure the HTML/CSS for this specific layout. A screenshot of the required grid is attached.

Any advice or pointers would be greatly appreciated.

Thank you

https://i.sstatic.net/gIWIt.png

Answer №1

Check out my solution here: http://jsfiddle.net/anirbankundu/DJqPf/1881/

I have implemented the solution using two different approaches in the fiddle, highlighting which method is more effective. Feel free to explore and see which one works best for you.

HTML:
<div id="left">
  <h4>Left Column</h4>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
  </table>
</div>

<div id="right" style="text-align:right;">
  <h4>Right Column</h4>
  <table>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </table>
</div>

CSS:

.table-wrapper {
  overflow-x: scroll;
  overflow-y: visible;
  width: 250px;
}

td,
th {
  padding: 5px 20px;
  width: 100px;
}

th:first-child {
  position: fixed;
  right: 35%
}

#container {
  display: table;
  width: 100%;
  border: 1px solid red;
}

#row {
  display: table-row;
}

#left,
#right,
#middle {
  display: table-cell;
  border: 1px solid green;
}

#left {
  width: 80%;
  max-width: 350px;
  overflow-x: scroll;
}

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

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

Steps to create a clickable drop-down arrow with a label

I've designed a vertical navigation accordion menu that allows users to hover and click on any title (label) to expand a sub-menu. However, I'm facing an issue where my drop-down arrow is not clickable, unlike the rest of the label which works f ...

tips on displaying textbox content on a php webpage

I have a piece of code where, when text is entered into a textbox and the add attribute button is clicked, the entered value is displayed on the page twice. One appears in the first row of a table, and the other appears in the first row of a second table. ...

Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference: I've tried using these CSS styles but it didn't work as expected. #mega-menu-wrap-primary-menu #mega-menu-p ...

What is the best way to accurately establish a new name for the evolving scope

var tags_offset=[]; $scope.getRelations = function(id, ref, subRef=0){ tags_offset[ref+'-'+subRef]=0; $http.get( CONS.appHttp+ '/tags.php?ID='+id +'&ref='+ref +'&contentType='+subRe ...

What is the best way to transfer the data from one JavaScript object to a new, empty object?

My Angular site requires a JavaScript object (JSON retrieved from a database) to display widgets: [{'widget_id':'1','widget_name':'Blue Widget','widget_description':'A nice blue widget','wid ...

Opt for text links over browse forms

My requirement is to have a simple text link that triggers a browse-window opening. The idea is that when users click on certain words (such as 'upload an image'), a browser window appears allowing them to select and upload an image of their choo ...

Guide for preventing hours before the scheduled date and time with v-calendar

I am utilizing v-calendar to display the start date and time as well as end date and time in dateTime mode. My goal is to prevent the end date and time from being set before the start date and time. In order to achieve this, I have implemented the :min-dat ...

Encountering difficulties in transferring bulky files with the request module in Node.js

When working on a Node.js project, I encountered an issue with transferring files from the computer to the server. While I am able to successfully send files that are up to 2mb in size, larger files fail to upload. Here is the code snippet I am using: var ...

What could be causing the CSS not to load on my WordPress website?

In an effort to improve my page speed score, I decided to install several plugins. Unfortunately, after installing w3 total cache, my website stopped loading CSS properly. Check out this image of the website ...

Exploring options for accessing Google Maps API on iPhone without using UIWebView for processing JavaScript

I need to retrieve data from Google Maps using JavaScript, without using a webview. For example, I have two points (lat,lng) and I want to use the Google Maps API to calculate the driving distance between them. Essentially, I want to utilize the Google Ma ...

When using React / Next.js, the .map() function may not rerender the output based on changes in the state array if the keys remain the same

In my react component, Matches.js, I handle the display of tournament matches sorted by rounds. The data is fetched from a parent component through nextjs SSR and passed as props to the child component. To avoid unnecessary requests upon data changes like ...

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

What is the best method to determine if a text box is filled or empty?

I need to verify whether a text box is populated with a name. If it is empty, an alert message should be shown upon clicking the submit button, and the page should not proceed with submitting the blank value. If there is a value in the text box, then that ...

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

Restrict the width of an absolutely positioned element to the width of its

FIDDLE I have a situation where I need to position an element absolutely, like a drop-down menu. However, when the window is resized and becomes narrow, there is not enough space for it. My requirements are: - The right edge of the dropdown should not g ...

Transform Client - Server command-line interface Node.js application into a Docker container

My Node.js application consists of two separate components: an Express.js server and a CLI built with vanilla JavaScript and inquirer.js. These components communicate with each other through a REST API. The main reason for this setup is to adhere to the SO ...

Error thrown by Jest: TypeError - req.headers.get function is not defined

I have a function that is used to find the header in the request object: export async function authorizeAccess(req: Request): Promise<Response | {}> { const access = req.headers.get('Access') if(!access) return Response.json('N ...

Combining React state value with an HTML tag would be a great way

I am facing an issue while trying to concatenate the previous value with new data fetched from an API using a loop. Instead of getting the desired output, I see something like this: [object Object][object Object],[object Object][object Object] Here is ...

White Background Dialog in Angular

I am struggling to change the default white background of my webpage. Is there a way I can use CSS to blur or darken the background instead? I tried applying CSS code but couldn't locate the correct class. I also attempted setting the "hasBackdrop" at ...