Aligning the :before pseudo element and cell contents vertically using CSS

Question

Aligning the :before pseudo element and cell contents vertically using CSS

I am encountering a very specific issue with a web view I am designing for mobile devices. Within the webview, I have a table that is being re-arranged vertically for smartphone screens. To achieve this rearrangement, I hide the table header and use the column name as a :before pseudo element from a data-label attribute on the original HTML element.

The problem arises when the pseudo element and the content in the td do not align vertically, despite both elements being floated in opposite directions. It seems that the length of the text within the td element is causing this misalignment, but I am unsure of the exact reason behind it.

Attached below is an image illustrating the issue:

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

This is how my HTML is structured:

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

Here is the computed CSS code for reference:

td Style

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

:before Style

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

If anyone can provide insight into why this alignment issue is occurring and what adjustments need to be made to rectify it, I would greatly appreciate it.

Thank you in advance.

html css alignment media-queries pseudo-element

Answer 1

Answer №1

The issue you're encountering stems from utilizing the float style in td:before.

index.html

<table class="table table-hover theme-1">
     <thead>
        <tr>
           <th colspan="2">Table 1</th>
        </tr>
    </thead>
    <tbody>
    <tr>
       <td>
        <span>Table col</span>
       </td>                           
    </tr>                                                                                                                                                                          
 </tbody>

To resolve this, place a span tag in the td cell with the max-width property specified as follows:

max-width: 50%;
display: block;

Additionally, include the remaining max-width in the before section like so:

td:before {
        position: absolute;
        content: "shaane shane";
        right: 0;
        max-width: 50%;
        top: 50%;
        transform: translateY(-50%);
        }

Note: Use the position attribute instead of float.

Answer 2

The issue you're encountering stems from utilizing the float style in td:before.

index.html

<table class="table table-hover theme-1">
     <thead>
        <tr>
           <th colspan="2">Table 1</th>
        </tr>
    </thead>
    <tbody>
    <tr>
       <td>
        <span>Table col</span>
       </td>                           
    </tr>                                                                                                                                                                          
 </tbody>

To resolve this, place a span tag in the td cell with the max-width property specified as follows:

max-width: 50%;
display: block;

Additionally, include the remaining max-width in the before section like so:

td:before {
        position: absolute;
        content: "shaane shane";
        right: 0;
        max-width: 50%;
        top: 50%;
        transform: translateY(-50%);
        }

Note: Use the position attribute instead of float.

Answer 3

Answer №2

Get ready

td { align-items: center; }

Answer 4

Get ready

td { align-items: center; }

Answer 5

Answer №3

After hours of troubleshooting, I finally uncovered the solution on my own...

The issue stemmed from the compilation of the .cshtml razor syntax.

Because the date fields were enclosed within a C# if-statement, I followed my usual coding format:

@if(startDate != DateTime.MinValue)
{
  <td class="ta-left" data-label="Start">@startDate</td>
}

The problem lay in the text indentation and line breaks for maintaining clean code.

The razor compiler was automatically adding line breaks at certain points, causing errors. Fortunately, the fix involved adjusting the razor markup like so:

@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}

Answer 6

After hours of troubleshooting, I finally uncovered the solution on my own...

The issue stemmed from the compilation of the .cshtml razor syntax.

Because the date fields were enclosed within a C# if-statement, I followed my usual coding format:

@if(startDate != DateTime.MinValue)
{
  <td class="ta-left" data-label="Start">@startDate</td>
}

The problem lay in the text indentation and line breaks for maintaining clean code.

The razor compiler was automatically adding line breaks at certain points, causing errors. Fortunately, the fix involved adjusting the razor markup like so:

@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}

Aligning the :before pseudo element and cell contents vertically using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for compiling Bootstrap SCSS to specifically include only the extended classes

Retrieve the targeted row from the table and then employ a function

What is the best way to align text to the center in a bootstrap table?

Concealing the pathway to a background image

What is the best way to define the location of a button's on-click event using jQuery?

housing the picture within a CSS grid

generate radio buttons and corresponding labels in real-time

Optimal method for identifying all inputs resembling text

Having trouble accessing DOM elements in Durandal

Style applied directly to .col elements

Concluding Engagement After Announcing a Victor in a Virtual Competition

Is there a way to collapse just one specific row in Angular?

Incorporating hyperlinks into icons

HTML5, canvas covering every element

Is there a way to display the value of a script function within an HTML block in an Angular application?

Creating multiple columns and adding new columns to the right side

Designing exquisite button navigation

How to properly utilize HTML <a> tags with accents in the Python Telegram API

Tips for ensuring the border matches the size of the image

Add a border to the navigation bar item to indicate the current page being displayed