Use column formatting for the table's body section

I have written the code below in HTML to create a table. I am looking to apply a specific style to the table body elements in a column that has been assigned a CSS class, while excluding the header columns from this style application.

As an example, I have used a CSS class called "body-right". What I aim to achieve is for all the table body elements in the "Value" column to be right-aligned, but not affecting the header column. How can this be accomplished with CSS?

<table>
    <thead>
        <tr>
            <td>Criteria</td>
            <td>Description</td>
            <td class="body-right">Value</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>GGGGGG</td>
            <td>35.63</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>HHHHH</td>
            <td>68.26</td>
        </tr>
        <tr>
            <td>MNP</td>
            <td>KKKKK</td>
            <td>45.26</td>
        </tr>
    </tbody>
</table>
javascriptjqueryhtmlcss

Answer №1

Here is a CSS snippet you can use:

tbody td:nth-of-type(3) {
  text-align: right;
}

Example

table {
  border-spacing: 0;
  border-collapse: collapse;
  font: 14px verdana;
}

td {
  padding: 0.2em;
  border: 1px solid gray;
}

tbody td:nth-of-type(3) {
  text-align: right;
  background: yellow;
  width: 4em;
}
<table>
    <thead>
        <tr>
            <td>Criteria</td>
            <td>Description</td>
            <td class="body-right">Value</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>GGGGGG</td>
            <td>35.63</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>HHHHH</td>
            <td>68.26</td>
        </tr>
        <tr>
            <td>MNP</td>
            <td>KKKKK</td>
            <td>45.26</td>
        </tr>
    </tbody>
</table>

Answer №2

To accomplish this, you can set a specific inline style for the header section individually. Alternatively, you could adjust the CSS slightly by using

thead .body-right { text-align:right; }

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

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

javascriptreactjs

What is the best way to retrieve the value of a selected radio button with YUI?

Here is the structure of my radio buttons... <div id="test"> <input name="test1" value="a" type="radio"> <input name="test1" value="b" type="radio"> <input name="test1" value="c" type="radio"> </div> What is the best w ...

javascriptformsradio-buttonyui

What is the best way to toggle the active class on a ul list?

After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's ...

javascriptjqueryhtmlcss

Create an input field with a dynamic and exclusive identifier using the DataTables plugin

I am having trouble creating unique IDs for each input field based on the number of rows Here is the code snippet: $(document).ready(function() { var oTable = $('#jsontable').dataTable(); //Initialize the datatable $.ajax({ url ...

javascriptjqueryhtml

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

jquerycssmobileresizewindow

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trying to grasp the concept, I experimented with the following setup: <div id="Outer"> <div id="Inner"></div> </div> In this scenario, the outer div has a relative position and the inner div has an absolute position. This allo ...

htmlcssposition

What method does nosotroshq.com use to achieve the navigation effect when hovering over a menu item?

Seeking advice from skilled individuals familiar with JQUERY: Can anyone explain the technique used by nosotroshq.com in their top navigation bar? Specifically, how do they create the slow animation when hovering over "ABOUT US"? Any insights would be ap ...

jquerycssjquery-plugins

Detecting Pixel Colors Across Multiple Overlapping Canvases

I have a challenge with multiple canvas elements on my webpage. I am trying to retrieve the pixel color of all overlapping canvas elements when they are stacked on top of each other. Let me illustrate with an example below. In this scenario, I am attempt ...

javascriptcsshtmlcanvas

designing a button with eye-catching CSS3 styles

Although I struggle with CSS, I managed to create a button that looks pretty good. However, it doesn't have the same shine as the buttons on Yahoo Mail or the buttons found at Check out my demo on Fiddle: http://jsfiddle.net/karimkhan/y6XGg/ I wou ...

css

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...

javascriptajaxhtml

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

htmlcss

Using jQuery to send JSON data through AJAX to PHP

I'm attempting to utilize jQuery AJAX to send JSON data to a PHP file. My goal is to extract the values and IDs from multiple child elements, create a JSON object with this data, and then transmit that object to a PHP file for processing and insertion ...

phpjqueryajaxjson

Steps to turn off the automatic completion feature for orders in WooCommerce on your WordPress website

Looking for assistance with changing the order status from completed to processing. When an order is placed, it automatically goes to completed status which is not the desired outcome. The status should change based on the virtual product purchased. I wou ...

javascripthtmljquerycsswordpress

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

Storing a date in MySQL using Vue.js and Node.js

My current tech stack consists of nodejs and express.js for the backend, vuejs for the frontend, and mysql as the database. I am facing an issue where I cannot send a date retrieved from localStorage to my mysql database. Whenever I try to send the date, ...

javascriptmysqlnode.jsvue.js

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

Activate on-demand static regeneration with Next.js

I am thoroughly impressed by the functionality of Incremental Static Regeneration in Next.js. However, I am currently seeking a method to manually trigger static page regeneration as needed. It would be ideal to have a command that can be executed via an ...

javascriptnext.jsvercel

Is there a way to use JavaScript to modify the position of a div element

Can we adjust the div position using CSS (absolute or relative) with JavaScript? Here's an example code snippet: <div id="podpis" style="margin-top: 2rem;"> <div class="invoice-signature"> <span><?=$xml->sanitiz ...

javascript

Vue.js - The dissonance between data model and displayed output

Below is a simplified example of my issue: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script> ...

javascriptvue.js

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

https://i.stack.imgur.com/Wjtn5.png Hello there, I'm trying to make the numbers in the first group match the style of the second group (noche, mañana...). I've set both the group and individual element width to 100%, but the numbers beyond 22 ...

htmlcssangulartypescriptangular-material