How to position the <th> element at the center in a double header table using

I need help centering the th element Vieillesse de base between two other th elements in a table. I want to move the position of th Vieillesse de base to be aligned with both Provisionnel and Régularisation.

Here is my HTML code:

<div class="row mt-1">
   <div class="col-12">
      <table class="table table-striped table-adjust ">
         <thead class="cordonnes-cabinet">
            <tr>
               <th scope="col">Date</th>
               <th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
               <th scope="col" style="text-align:right">Complémentaire</th>
               <th scope="col" style="text-align:right">Total</th>
            </tr>
            <tr>
               <th scope="col">...</th>
               <th scope="col" style="text-align:right">Provisionnel</th>
               <th scope="col" style="text-align:right">Régularisation</th>
               <th scope="col" style="text-align:right">...</th>
               <th scope="col" style="text-align:right">...</th>
            </tr>
         </thead>
         <tbody class="cordonnes-cabinet">
            @for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
            {
            <tr>
               <th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
            </tr>
            }
            <tr>
               <th style="font-size:14px">Total</th>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
               <td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve this, you will need to utilize the colspan attribute in the th tags to create the appearance of equal width with the second row. Simply apply the .text-center class to center the content.
In your specific scenario, include colspan="2" in the second th.

Check out the JS FIDDLE DEMO here

<table class="table">
  <thead class="cordonnes-cabinet">
    <tr>
      <th>Date</th>
      <th colspan="2" class="text-center">Vieillesse de base</th>
      <th>Complémentaire</th>
      <th>Total</th>
    </tr>
    <tr>
      <th style="width:10%">...</th>
      <th class="text-center">Provisionnel</th>
      <th class="text-center">Régularisation</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbbody>
    <tr>
      <th>col1</th>
      <td class="text-center">col2</td>
      <td class="text-center">col3</td>
      <td>col4</td>
      <td>col5</td>
    </tr>
  </tbbody>
</table>

Answer №2

The challenge here is that your text appears centered, but the column to the right is a certain width, creating an optical illusion of a wider column.

To address this, I recommend setting the column labeled "Complémentaire" to text-align: left with the class text-left to achieve the desired illusion.

I have included a screenshot where you can see that even though your code centers the text, it creates an optical illusionhttps://i.sstatic.net/CnkFL.png

This is how it would look with left alignment in the blue column: https://i.sstatic.net/EicKo.png

Now, it's just a matter of adding padding to the td's and th's to make it visually appealing.

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

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

cssangulartypescript

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Struggling to align elements vertically and horizontally using Bootstrap in an HTML file

Here is the code snippet that I have written: .box { background-color: red; } .container { height: 50vh; background-color: blue; } <!DOCTYPE html> <html lang="en"> <head> ...

htmlbootstrap-5

What is the best way to extract the ID from a dynamic "ul" tag?

Let me explain the scenario I'm facing. Currently, I have a button in my HTML code that triggers a function to generate content from another button upon selection. In the HTML code, there is a ul tag containing li tags which are populated dynamically ...

javascripthtmlajax

Prevent tooltips from disappearing when hovering over them

I need assistance in keeping my tooltip visible when the mouse is on it, but hiding it when the mouse moves out. Can you please help me achieve this? $(document).ready(function(){ $('[rel=tooltip]').bind('mouseover', function() { ...

javascriptjqueryhtmlajax

Vuetify Container with a set maximum width that remains fixed

I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...

cssvue.jsvuetify.js

Troubleshooting: Issues with window.location.href and window.open within an iframe

Code Update <div> <button type="button" class="submit btn btn-default" id="btnSubmit">Submit </button> <button type="button">Cancel</button> </div> <script> $("#btnSubmit").click(function(e) { ...

javascriptjqueryangularjsajaxhtml

I keep encountering an Uncaught TypeError when trying to read the property 'options' of null, despite having the element ID properly defined

I am a newcomer to the world of Javascript and HTML. Despite having the element defined in HTML, I am encountering an exception. Could someone please offer assistance? My goal is to create a shape (initially a circle) based on user input such as shape type ...

javascripthtmlhtml-datalist

Ways to choose tags that do not contain a particular tag within them

I am trying to utilize querySelectorAll to select all i elements that do not contain a font tag. The selector I attempted is: document.querySelectorAll('i > *:not(font)') <i> <font color="008000">Here goes some text</fon ...

javascripthtmlcssqueryselector

Chrome browser causing background image to disappear

Encountering an unusual issue in the Chrome web browser. Whenever I click on an input field, background images with background-attachment:fixed seem to disappear. I've attempted various solutions from similar questions without success. Can someone ass ...

cssgoogle-chromebackground-image

Designate the preferred location for requesting the desktop site

Is there a way to specify the location of the 'Request desktop site' option? Here is the code I am currently using: var detector = new MobileDetect(window.navigator.userAgent); if(detector.mobile() != null || detector.phone() != null || det ...

javascriptphphtmlcss

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

Issue with the Mat paginator items per page functionality not functioning properly in Angular 9

I have encountered an issue where changing the items displayed per page on a table I'm rendering from an observable is not functioning as expected. Despite trying methods such as ngAfterViewInit and calling page events, I did not see any changes. ...

htmlangulartypescriptangular9mat-pagination

Designating the selected button as "active"

Consider the following HTML snippet: <div class="wp-editor-tabs"><button type="button" id="bbp_topic_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="bbp_topic_content">Visual</button> <button type="button" id="bb ...

htmlcsswordpressbutton

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...

javascriptjqueryhtmlcssflexbox

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

cssresponsive-designmedia-queriesstyling

Create a typing effect in Javascript that mimics the user's input

Trying to simulate a typing effect with the sentence extracted from user input using JavaScript, but encountering some issues. Successfully capturing and displaying the input in the console with console.log(), however, incorporating the typing effect func ...

javascripthtml

Leveraging the power of JavaScript and possibly regular expressions to extract numerical values from a

I am attempting to extract a variable number from the text provided in the following example: Buy 5 for € 16.00 each and save 11% Buy 50 for € 15.00 each and save 17% Buy 120 for € 13.00 each and save 28% Buy 1000 for € 10.00 each and save 45% Th ...

javascriptjqueryhtmlregex