How can CSS grid be used to move a particular <td> element?

Currently, I am working on creating a dynamic table using CSS grid and I am looking to slightly adjust the left-most <th> and <td>. I am uncertain about how to move a specific element within a <table>.

My goal is to achieve a layout similar to this: https://i.sstatic.net/qjekU.jpg

You can view my current progress in this fiddle: https://jsfiddle.net/anr1exp2/

The issue I am facing is that the project names in the left-most <td> are too close to the rest of the data. I want to adjust them slightly while maintaining the integration of a table with CSS grid.

For context, I attempted to create the entire table using CSS grid alone, but due to its dynamic nature, it proved to be quite challenging and cumbersome.

cssvue.jsgridcss-grid

Answer №1

Include this CSS style

th:first-child, td:first-child {
  min-width: 120px;
  background-color: lightgreen;
  text-align: center;
}

Feel free to adjust the min-width value as needed

Keep in mind that your table is not using grid layout directly; it's contained within a grid cell

view updated demo here

To maintain the layout while making the change use a transform property:

th:first-child, td:first-child {
  transform: translateX(-18px);
}

see second alternative demo

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

Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

While there are numerous similar issues out there, the bug I am encountering feels unique. This issue involves a page with a div in position:fixed style, specifically affecting certain less common mobile browsers like Star Safari, DU Browser, and Tint Brow ...

csscross-browsercss-positionmobile-browser

Incorrect Calculation of CSS Grid Container Width in Firefox

When using this CSS Grid code, there is a difference in behavior between Chrome and IE compared to Firefox. https://codepen.io/inkOrange/pen/XGzeMo This layout is intended to scroll horizontally when the content overflows beyond the fixed container size o ...

htmlcssfirefoxcss-grid

Ways to stop a tag from causing disruption to the alignment of another

In a div with text-align: center; applied, I have two tags. My issue is that I want one of them to be centered on the same line, while the other is positioned to the right. However, both tags are currently sharing the centered space and extending equally t ...

htmlcssbutton

What could be preventing my image from displaying in the header section?

Having trouble displaying the image I added in the header section as a logo. The code works for my online course instructor, but no luck for me. I've tried different images and links to no avail. If you would like to take a look at the codes I used, ...

htmlcssbootstrap-5

Avoiding clashes between CSS styles in web applications

As I work on developing a web application that can be embedded on external websites, one of the challenges I am facing involves constructing dialogues with their own unique stylesheets. This could potentially lead to conflicts if both my dialogue container ...

css

CSS Animation Effect on Transparent PNG Image

Today, while working on my website, an interesting CSS effect came to mind. I vividly remember seeing it a few months ago, but unfortunately, I couldn't find it among my bookmarks. The website featured a captivating design with a prominent logo that ...

cssanimationcolorsspinning

Safari not supporting SVG with pointer events

When working with SVG elements (shapes), I often encounter situations where mouse clicks need to pass through transparent areas or where there is no actual shape present. To address this issue, I have utilized the css property pointer-events:none on the r ...

csssvg

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

Vuex employs keys for retrieving objects from the state

I have the following code implemented in Vuex for a store. It works perfectly fine when structured like this: state: { APIData: {}, }, getters: { getFeed: state => {return state.APIData }, }, mutations: { SET_FEED_DATA(state, {folder_id, dat ...

vue.jsvuex

What is the best way to create underlined text that is either left-aligned or centered?

I am looking to replicate this specific style of decoration in a full width container. My goal is to have it aligned to the left of the text and restricted to a maximum width. https://i.stack.imgur.com/H8DXT.png ...

htmlcss

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...

javascripthtmlcss

Unresponsive CSS styles on a specific DIV element

Here is the HTML code I am currently working with: <body> <section id="info"> <div class="status"> ... I have been attempting to apply styles to the div with a class of 'status' using my CSS file linke ...

htmlcss

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

I am trying to achieve a similar effect as shown on: this website I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image. The long vertica ...

javascripthtmlcssmouseoveronmouseover

A common challenge in React is aligning the button and input line on the same level

I'm currently working on a React page where I have an input field and a button. My goal is to align the bottom edge of the button with the bottom line of the input. Here's the code snippet I have: `<form className='button-container'& ...

javascriptcssreactjs

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

javascriptcss

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

The Vue graphql result is missing the required query attribute

It's puzzling to me why this particular error keeps appearing in the console import gql from 'graphql-tag' // importing gql const getBooksQuery = gql`query // defining the query { books{ name id } } `; export defau ...

vue.jsvuejs2graphql

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

cssreactjsmaterial-ui

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

I'm currently working on a webpage located at: On this page, there is a containing division with 5 elements inside. They are floated left in order to align vertically, but I am facing some challenges when it comes to adjusting my CSS for media querie ...

csscss-floatfont-sizefluid-layout

Tips for adding and removing active class with navbar links using JavaScriptonclick

I need help with toggling the "li-active" class on my navigation bar links. Currently, when I click on a link, the "li-active" class is transferred from the previous link to the newly clicked link instead of removing it first. Can someone please assist me ...

javascripthtmlcss