How to perfectly position a column using CSS

Looking to align columns in a table based on a class on the header? Consider the example below:

<table>
    <thead>
        <th>Name</th>
        <th class="price">Price</th>
    </thead>
    <tbody>
        ....
    </tbody>
<table>

While :nth-of-type can be used, it may not always be predictable. The column position could vary or multiple columns may need to be aligned to the right.

Is there a solution for this query? Legacy browsers, including Internet Explorer 9, are not a concern. Chrome and Firefox compatibility will suffice.

To clarify, the goal is to align text in body columns with their associated header column.

htmlcssweb

Answer №1

Unfortunately, it is not possible to apply styles to table cells based on the class attribute of a column header. CSS does not have the capability to link cells in that way.

To align a column effectively, the best approach is to assign class attributes to each individual cell in the column. Alternatively, using the HTML align attribute can also achieve the desired alignment.

Answer №2

UPDATE: Please note that the following solution may not apply to all properties. Text-align, for example, is not supported.

To implement this in your CSS, use the following code snippet:

col.price { text-align:right; }

Incorporate the following HTML code:

<table>
  <col />
  <col class="price" />
  <tr>
    <td>Content in the first TD of the first TR</td>
    <td>9.95</td>
  </tr>
  <tr>
    <td>Content in the first TD of the second TR</td>
    <td>4.85</td>
  </tr>
</table>

For more information, visit:

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

Unresolved styles in React component linked to styles.css file

As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file. Let's take a look at my RegisterPage.jsx component: export default function RegisterPage() { ret ...

javascripthtmlcssreactjs

The functionality of getElementsByClassName and appendChild is not producing the desired outcome

First of all, the solutions must strictly adhere to VanillaJS. I am presenting a straightforward HTML code snippet below: <div class="x">X</div> <div class="x">Y</div> <div class="x">Z</div> Accompanied by a block of ...

javascripthtml

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

Leveraging AJAX to call upon a designated php file

I have a selection of menu items on my webpage, each with different options: option1, option2, and option3. Additionally, I have corresponding PHP files on my server for each of these menu items: option1.php, option2.php, and option3.php. For simplicity, ...

phpjavascripthtmlajax

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

htmlcsslinecell

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps: 1.) Begin by clicking on a category 2.) The filtered products will be displayed 3.) Select the desired products from the filter 4.) Once selected, the products will appear in the rightmost part of the screen within t ...

javascripthtmlcssangular

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

htmlformscssstylesmultiple-columns

Utilizing Bootstrap 5: Breaking a Page into Two Separate Vertical Sections

I am looking to design a unique grid system that divides the page into either 2 columns or 2 rows that are completely separate from each other. This means that the content on one side of the page does not expand to match the height of the content on the ot ...

htmlcsslayoutgridbootstrap-5

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

htmlcsslayoutcss-grid

What is the best way to incorporate this HTML and script into a React component?

After receiving the embedded HTML and script from a platform, I discovered that a button triggers the script. It was originally designed to be embedded on a website, but I am attempting to integrate it into a React application. Here is the code provided fo ...

javascriptreactjswebiframe

Navigate up to the ancestor element before moving back to the previous two sibling elements using Xpath

Here is an example of HTML code: <span class="state"> <label class="state button start" ...>"Start"</label> </span> <span class="name tracker_markup"> <span class="labels pre ...

pythonhtmlxpathselenium-webdriver

having difficulty applying border color to input when clicked

Is there a way to change the border color of an input field on an onClick event? In my scenario, if the 'Other' radio button is selected and a user attempts to save without entering any value in the input field, I want the border color of the in ...

javascriptjquerycss

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

jqueryhtmlcss

PHP Email Styling Techniques

While working on a website, I encountered an issue with the automated email sent upon registration. The email was displaying the CSS code. $body '<span style="color:#444444;">Header</span>'; I attempted to use a code from online tha ...

phphtmlcssemailstyles

Building a Dynamic Web App with PHP and Vue.js

I developed an API using PHP and you can access it through this link: However, I encountered an issue when trying to display the data on the front-end of my Vue.js (Home.vue) file using axios. Below is the code I used: <ul class="ta-track-list" v-if= ...

javascriptphphtmlvue.js

What is the most effective method to ensure this layout is functioning properly?

Seeking a solution to an unexpected challenge, what initially appeared as a simple task has transformed into a complex dilemma. Balancing the vertical alignment of green DIVs while preventing absolute positioned elements from overlapping following content ...

cssalignment

Using CSS to cut out a triangle shape from an image

Our designer has a vision for this: However, I'm struggling to find a suitable method for creating the triangle crop effect: Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape Creating a l ...

cssimagepositioncrop

Receiving an empty response for the radio button selected

Having some trouble retrieving the checked radio button in my PHP via Post method. Despite using validation and submitting the form through JavaScript, I'm not getting any value. Can anyone point out where I might be messing up? Let me know if you nee ...

phphtml

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss