How do I center text in a table header and align it to the right with its siblings in HTML?

When working on my projects, I often come across a design challenge. I need to align cell text in the center of the header and then right-align it with the data above and below, all within a bordered table. The cells in the image below are spread across different rows. How can I achieve this?

I attempted to use text-align:center, but it centered everything. I also tried using padding, but it didn't produce the desired result. Even text-align: right did not properly align the data with the header.

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

htmlcsshtml-table

Answer №1

<div style="text-align: center;">My header goes here</div>
    <div style="text-align: center;">
        <div style="display: inline-block; text-align: right;">
            <div class="inner_container">0</div>
            <div class="inner_container">123444</div>
        </div>
    </div>

An example of using the code above:

<div style="text-align: center;">My header goes here</div>
    <div style="text-align: center;">
        <div style="display: inline-block; text-align: right;">
            <div class="inner_container">0</div>
            <div class="inner_container">123444</div>
        </div>
</div>

Answer №2

To achieve the desired layout, you can utilize a parent table and a child table as illustrated below. The child table can be centered within the parent using margin, and you can align the contents of the first and second child as needed.

div {
  width: 200px;
  border: 2px solid;
}

#parent {
  width: 100%;
}

#child {
  margin: 0 auto;
}

#child tr:nth-child(1) {
  text-align: right;
}

#child tr:nth-child(2) {
  text-align: center;
}
<div>
  <table id="parent">
    <tr>
      <th>Header content</th>
    </tr>
    <tr width="100%">
      <table id="child">
        <tr>
          <td>0</td>
        </tr>
        <tr>
          <td>123344</td>
        </tr>
      </table>
    </tr>
  </table>
</div>

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

Struggling with getting the navigation bar to show up in a row instead of stacking

Hey there, I need some help with the layout of my page. Here's the link to the page I'm currently working on: At the moment, the list is showing up vertically instead of horizontally. CSS: li { display:inline; list-style-type:none; ...

htmlcsslistinline

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss

Ionic - encountering crashes with ion-nav-view on emulator

I am encountering an issue with ion-nav-view. Whenever I try to use it, the emulator displays a black screen, but it works perfectly fine in ionic serve. I suspect it may be a syntax error causing this problem. Interestingly, when I create a blank projec ...

javascripthtmlcssangularjsionic-framework

How can you create an ordered list with letters and parentheses using HTML5 and CSS?

Is it possible to use letters with ")" instead of "." in an ordered list format? For example: a) Some text... b) Some text... c) Some text... Currently, I am seeing: a.) Some text... b.) Some text... c.) Some text... I need to remove the periods. CSS: ...

csshtmlhtml-lists

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

When Css is incorporated within a text, it prevents the use of " " from functioning properly

I am currently developing a GUI application using Qt 4.8. I have a label that displays text in white (the stylesheet has already been set up for this) and I want to change the color of the word "UPDATE" to red. Here is my initial code: //all text in whit ...

c++cssqt

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Extracting data from a JQGrid in HTML5 Builder: a beginner's guide

Apologies for asking this question as I couldn't find any relevant posts addressing it specifically in relation to HTML5 builder. I am trying to retrieve the value of the "ID" column, which happens to be the last column among the four, based on the r ...

phpjavascripthtmljqgridhtml5builder

Express and Node.js working together

Recently, I've been encountering an issue with my POST function. Whenever I click on the log in button, a message pops up saying: Cannot POST /login I'm at a loss here and would greatly appreciate any help you can provide \(^-^\) B ...

javascripthtmlnode.jsexpresspost

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

Is it possible to continuously loop and gradually fade the same image URL using JavaScript?

I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...

javascriptjqueryhtmlajaxxmlhttprequest

Trick to keep horizontal element alignment intact when scroll bar appears

Currently, all my pages are designed with the standard fixed-width-margin-left-right-auto layout. .container{ width:900px; margin:0 auto; } An issue arises when some of these pages exceed the height of the window, requiring a vertical scroll ba ...

javascripthtmlcsspositionscrollbar

What is the best way to denote multiple line breaks in HTML code?

When creating blank lines on my webpage, I typically use the code <br />. However, inserting 20 - 40 of these can be quite cumbersome as each br tag is placed on a separate line after formatting. Is there a more elegant way to achieve the same effe ...

asp.nethtml

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

javascriptcssreactjswebpack

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

javascriptcssangulartypescript

Why does my jQuery map code work in version 2.0 but not in version 3.0?

I've encountered an error with a jQuery map snippet that I'm trying to troubleshoot. It was working fine under jQuery 2, but after upgrading to version 3, it doesn't work anymore and I can't figure out why. Feeling stuck! var menuIte ...

javascriptjqueryhtml

Code to execute function depending on the width of a div

Looking for a script that can run a function depending on the width of a div. I want the ability to trigger the function when the div is resized. For example, if the div's width is 300px, execute function 1; if it's 700px, execute another functi ...

jqueryfunctionhtmlresizewidth

Checkbox fails to trigger onChange when the checked value is controlled by state management

Currently, I am working with a material-ui Table and have been in the process of implementing multi-select functionality on it. The behavior I am aiming for my multi select to exhibit is as follows: Checkboxes should only appear at the beginning of a ro ...

javascripthtmlreactjscheckboxmaterial-ui