Troubleshoot: Bootstrap Table Alignment Problem

I've been struggling to align my table header and content properly, as shown in the image. I want the header aligned to the right while keeping the rest of the content aligned to the left of the header. Is there a way to achieve this using only CSS without manually setting offsets?

<table class="table">
  <thead>
    <tr class="text-uppercase">
      <th>
        <h4>BlaBla</h4>
      </th>
      <th class="text-right">
        <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td class="text-right">Table cell</td>

    </tr>
    <tr>
      <td>Table cell</td>
      <td class="text-left">Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td><span style="position:relative; color: red; left: 185px;">Desired</span>
      </td>
    </tr>
  </tbody>
</table>

https://i.sstatic.net/mFw0G.jpg

htmlcsstwitter-bootstraphtml-tablealignment

Answer №1

To position the left edge of your <span> element aligned with the right side of its parent container without specifying a fixed pixel value for the offset, you can use a percentage value instead.

Setting the left property to a percentage will make it relative to the width of the <span>'s container, which is equivalent to the header's length. For this scenario, using left:100% will push the element all the way to the right of the container.

This approach ensures that the positioning remains consistent regardless of how long the header or the container is, as it relies on a relative measurement rather than an absolute one:

<table class="table">
  <thead>
    <tr class="text-uppercase">
      <th>
        <h4>BlaBla</h4>
      </th>
      <th class="text-right">
        <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td class="text-right">Table cell</td>

    </tr>
    <tr>
      <td>Table cell</td>
      <td class="text-left">Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td><span style="position:relative; color: red; left: 100%">Desired</span>
      </td>
    </tr>
  </tbody>
</table>

If you have any further inquiries, feel free to ask. Hope this explanation proves useful!

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

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page

Seems like I have a straightforward issue related to HTML tags. I am looking to post some code snippets on my blog, specifically the <h1> heading</h1>. I want visitors to view and not just the bolded text of heading. Do I need to incorporate J ...

html

The formatting of ASP.Net MenuItems is not cascading down to the child items

I am facing a challenge while building an ASP.Net 4.5 menu programmatically in C#. The main issue is that the formatting of the child items is not inheriting from the top menu items as expected. Specifically, I am struggling with two formatting aspects: St ...

c#cssasp.netwebformsaspmenu

Is there a way to generate a distinctive curved design using CSS for a

I am currently using CSS and div elements in an attempt to create these particular lines: https://i.stack.imgur.com/Ytowq.png .line { width: 1px; height: 100px; background-color: black; position: absolute; border-radius: 50%/100px 1 ...

javascripthtmlcss

Leverage variables in mixins and extends within Less.js

When using a variable with mixin or extend in Less.js, the following code will result in an error: @bar : bar; .@{bar} { background: yellow; } // ParseError: Missing closing ')' .foo { .@{bar}(); } // This will not work .jam { &:ex ...

cssless

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

Reduce the size of text using HTML and CSS

I'm currently working on replicating an image using HTML and CSS that will be placed beneath the avatar on a forum. Here is what I have managed to achieve so far: https://jsfiddle.net/J7VBV/220/ table.avatarStats { border-spacing: 0; border- ...

htmlcss

What is the best way to include text containing apostrophes and special characters in PHP's 'echo' function?

Is there a way to safely insert the text without breaking the code? I am only able to paste the text as it is between the echo ''; but can add some functionality around it before echoing. Any suggestions on how to achieve this? Thank you! EDIT: ...

phphtmlstringapostrophehtml-escape-characters

The color of the background does not remain changed permanently

I'm having an issue where the background color changes when I click a button, but reverts back almost immediately to its original color. How can I ensure that the new color stays permanently? Here is a simple JavaScript function you can use: functio ...

javascripthtmlcss

Remove the "hover effect" from an element using programming on mobile devices

There is an element on my webpage that has a specific set of styles for when it is hovered over. However, on mobile devices, this triggers the "sticky hover" effect, where touching the element applies the hover effect until the user touches another part of ...

javascripthtmlmobile

Trying to figure out how to avoid HTML characters in AngularJS? I've come across suggestions to use ng-bind / ng-sanitize for escaping HTML, but I'm struggling to put

As a newcomer to Angular Js, I recently utilized ngx-editor to create a text-area with various formatting styles. However, upon submitting the content, I noticed that HTML tags were also being displayed. I understand that these tags appear when using diffe ...

javascripthtmlangularangular11ngx-editor

Safari is having trouble correctly displaying a CSS3 gradient with transparency

Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome: background: linear-gradient(transparent 124px, #de6230); I've even attempted the following fix without ...

csssafari

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue wil ...

htmlcsswhitespace

The border-radius property in CSS selectively rounds only one corner of the modal div window

There seems to be an issue with the border-radius property on modal divs in my project. When I apply the property, only one or two corners of the div round while the other corners remain unchanged. For a visual reference, please check out this image linke ...

htmlruby-on-railscsssass

Having trouble applying CSS to multiple classes used in an AJAX call

I'm trying to utilize richfaces for some fast AJAX widgets, but I am encountering difficulties in setting CSS parameters for them. After inspecting the generated code, I found that the elements have the classes "rf-ds" and "rpds". Despite applying st ...

javacssajaxjsfrichfaces

What is the advantage of parsing values in a switch statement compared to an if condition?

function checkInput() { let value = document.getElementById('test').value; if (value == 1) { console.log("It works with if statement"); } } function checkSwitch() { let value = document.getElementById('test').value; switc ...

javascripthtmlfunctionif-statement

Possible revision: "Trouble with event triggering when using an anchor tag within an <li> element

I am currently working with a horizontal menu plugin where I am including anchor tags within the <li> elements to create menu items. I have set up an onmouseover event for the anchor tag to display the submenu when the mouse hovers over it. However ...

jqueryhtml

The Bootstrap 4 column is not floating properly to the right as it is leaving a gap on the

My right sidebar is not floating to the right and has space from the right side. You can view it at this link: <div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;"& ...

cssbootstrap-4css-float

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

htmlcss

Customize the color of the arrow in Bootstrap

I would like to update the color of the arrow buttons. .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8' ...

htmlcssbootstrap-4