Right-align text in a table column (td), but shift it to the left using padding

I need to create an HTML table that displays numbers, and I want them aligned to the right while being placed on the left side of the cell. Here is an example:

Header A  |Header B  |
 -1       |5000      |
  1       | -20      |
100       |   1      |

The column width is variable, and I am using a font similar to Arial. Unfortunately, I am unable to modify any HTML elements like div or colgroup, nor can I use JavaScript. My only option is to apply a CSS class to the td element.

I attempted to use calc(100% - 25px), but the issue is that 100% refers to the width of the table rather than the column.

You can view my sample implementation here: http://jsfiddle.net/mwtL9cde/4/ (I added 50px padding there for demonstration purposes)

csshtml-tablepadding

Answer №1

To create fixed-width cells, you can set specific widths for your cells along with padding-right values that may require some trial-and-error, as shown in the snippet below (make sure to use box-sizing: border-box to factor in the padding within the fixed widths).

However, this approach is not dynamic and will not automatically adjust to different values.

table {
width: 400px;
}
td {
  width: 200px;
    text-align: right;
    box-sizing: border-box;
}
td:first-child {
    padding-right: 122px;
    background-color: yellow;
}

td:nth-child(2) {
    padding-right: 162px;
    background-color: red;
}
<table>
    <colgroup span="2"></colgroup>
    <tr>
        <td class="firstColumn">-280</td>
        <td class="secondColumn">100</td>
    </tr>
    <tr>
        <td class="firstColumn">100</td>
        <td class="secondColumn">1</td>
    </tr>
    <tr>
        <td class="firstColumn">-1</td>
        <td class="secondColumn">200</td>
    </tr>
    <tr>
        <td class="firstColumn">123412345</td>
        <td class="secondColumn">-280</td>
    </tr>
</table>

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

Navigation Bar Search Box Alignment Problem

Hi there, I'm new to programming and I'm trying to center my search bar with the navigation links beside it within a fixed navigation bar. However, I'm having trouble getting it to work properly. Can someone take a look at my HTML and CSS co ...

htmlcssnavigationsearchbarcenter-align

What is the best way to ensure that two contact fields are capable of adapting

Looking for a way to center two fields ("Call Us" and "Our Email") while also ensuring they are responsive on different screen sizes? The goal is to have them stack one on top of the other when viewed on a small screen. Even though inline CSS has been used ...

htmlcsstwitter-bootstrapbootstrap-5responsive

HTML Element Split in Two by a Line in the Middle

Greetings to all, after observing for a while I have decided to make my first post here (and just to clarify, I am an electrical engineer, not a programmer). I am in search of creating a unique element in HTML where I can detect clicks on both its upper a ...

javascripthtmlcss

Change the duration of a CSS animation rotation using jQuery and an input range control

I'm trying to rotate an element using the -webkit-animation properties, but I want to be able to control the duration using jQuery and an input range slider. Unfortunately, I'm having trouble getting it to work and I can't figure out what&a ...

jquerycssanimationrotationduration

If the desktop website is zoomed in beyond 150%, it will automatically switch to mobile responsive mode

Whenever the desktop website is zoomed above 150%, it automatically switches to mobile responsive mode. Is there a way to disable this feature? You can find the website in question here: Give it a try by zooming to 150 percent and see for yourself. Appr ...

htmlcsstwitter-bootstrapweb

Angular Tag < with CSS styling

Why should we use the angular tag in CSS? For example: .class << span Typically, we use these types of tags: body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-si ...

htmlcsscss-selectors

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

csswordpressinternet-explorer

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration: <body style="margin:0; padding:0; background-color:#eeeeee"></body> <div id="HeaderContainer" style="background-color:#eeeeee; color:Bl ...

htmlcss

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

cssreactjsnext.jstailwind-css

Font that has been downloaded is not showing up on the HTML document

I recently downloaded a new font and ensured the file location is correct, but for some reason it's not working: <style> @font-face { font-family:"myfont"; src: url('fonts/Helvetica85Heavy_22449.ttf'); } h1 { font-family: ...

htmlcssfonts

Padding beneath font only seen in Apple devices

My horizontal navigation bar and footer appear perfectly on my PC, but when I tested it on a Mac, the font seemed to be raised about 30px above its intended position in the navigation bar. After attempting various CSS resets and adjustments to the line-he ...

macoscssfontsbaseline

Enhance Your Website by Integrating Slick Slider with Bootstrap 4

I am currently facing a significant issue. I am attempting to integrate three div elements into my slider, and all of them maintain a Bootstrap 4 structure. The code looks like this, and it is being generated from another Jquery function where I am inserti ...

htmlcss.netbootstrap-4slick.js

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...

javascriptjqueryhtmlcss

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

htmlcss

When viewed on a mobile device, the contact information bar should vertically collapse

Here is the code snippet I am working with: <div class="topbarsection"> <ul> <li class="alignleft"> <a href="#">Office Address</a> </li> <li class="aligncenter"> Office Timings ...

htmlcssmobile

Incorporating a picture backdrop into a button element in a React Typescript component

I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...

cssreactjstypescriptmaterial-ui

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

javascriptjquerycssanimationsvg

Guide to populate Div content using JSON information

I am working with a JSON object that contains arrays, and my goal is to dynamically populate a div element. I have a dropdown menu (select option) that I want to fill with all the keys from my JSON data. Each key in my JSON has an array of data as its va ...

javascriptjqueryhtmlcss

Utilizing shared components with withStyles and material ui components

I'm currently working on a project using React, TypeScript, and Material UI. Here is the layout I have: <MuiThemeProvider theme={muiTheme}> <My Component/> </MuiThemeProvider> Within my component, the code looks something ...

cssreactjsmaterial-uijss

Creating a CSS rule that specifically targets a particular div id on a webpage can be accomplished by using the selector syntax to select

Is there a way to conditionally apply a @media print css ruleset only when a specific div is present on the page? For example, I have the following css to assist in printing #mytargetdiv: @media print { .inside-article > :not(#mytargetdiv), .inside ...

css