Arranging th tags level and at equal height within a datable using HTML and CSS

I am looking to arrange my top headers in a table so that the red square icon is always next to the first span without using absolute positioning. Is there a way to achieve this without using absolute position?

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
  background-color: red;
}

table.dataTable thead .sorting span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }

.dataTable thead th {
  position: sticky; top: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398879885">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table dataTable table-hover display nowrap no-footer pb-5" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="to">
        <span class="datatable-span" data-key-translate="common.to">Lastname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="creator">
        <span style="" data-key-translate="common.auctionCreator">Demand</span><br>
        <span style="" data-key-translate="common.internalOnly">Duration (min)</span><br>
        <span style="" data-key-translate="common.internalOnly">Date of demand</span>
        <span class="sort-icon datatable-span"/>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

htmlcsshtml-tabledatatablebootstrap-5

Answer №1

Ensure to include vertical-align: top !important; for the designated elements.

table.dataTable thead span.sort-icon {
  display: inline-block;
  padding-left: 5px;
  width: 16px;
  height: 16px;
  background-color: red;
}

table.dataTable thead .sorting span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled span.sort-icon { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right; }

.dataTable thead th {
  position: sticky; top: 0; vertical-align: top !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265348574855">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table dataTable table-hover display nowrap no-footer pb-5" id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr >
      <th data-key="from">
        <span>Firstaname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="to">
        <span class="datatable-span" data-key-translate="common.to">Lastname</span>
        <span class="sort-icon datatable-span"/>
      </th>
      <th data-key="creator">
        <span style="" data-key-translate="common.auctionCreator">Demand</span><br>
        <span style="" data-key-translate="common.internalOnly">Duration (min)</span><br>
        <span style="" data-key-translate="common.internalOnly">Date of demand</span>
        <span class="sort-icon datatable-span"/>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</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

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

htmlcssflexbox

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...

jqueryhtmltimercounteranimator

Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS. Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected. ...

htmlcss

Issues with vertical repeating in CSS Sprites

Hey there, I'm currently working on implementing css sprites in my web application. The challenge I'm facing is that I have organized the background of my website vertically within a sprite image. Now, one specific portion of the sprite needs to ...

csscss-sprites

Navigate to a unique component

I am attempting to navigate to the location of a custom component, but the reference to it is not returning a valid HTML node. The function "goToContactUs" should execute this action. What would be the most effective approach to accomplish this? class H ...

javascripthtmlreactjs

Step-by-step guide on creating a linear graph in CSS using a table

I am a newcomer to the world of CSS and I am looking to create a graph using CSS without the use of any libraries or frameworks. Can someone kindly assist me in drawing a linear graph using this HTML table? Appreciate any help in advance. <html> & ...

htmlcss

Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform: <table> <tr> <td class="changeme">something</td> <td>something</td> <td>something</td> <td>something</td> < ...

htmlcsshoverborderhtml-table

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...

htmlms-wordconverters

Generating numerous div elements with jQuery's zIndex property

While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...

javascriptjqueryhtmlcss

Safari not rendering SVG wave at full width reached

My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...

htmlcsssvg

What is the Best Way to Implement a Three-Column Layout on a Website with Bootstrap?

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

cssbootstrap-4frontend

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

Retrieving data from an HTML webpage using VBA

In my attempt to access the "username" cell from a web page using VBA, I encountered an issue. The HTML code of the page contains multiple elements with the same name, "LOGON_USERID", making it challenging for me to identify and access the correct one. Hi ...

htmlvba

To ensure proper functionality, make sure that Python Selenium's Geckodriver is correctly

I want to automate form filling using Selenium. Below is the HTML code for the form: <!DOCTYPE html> <html> <body> <h2>Text input fields</h2> <form> <label for="fname">First name:</label><br& ...

pythonhtmlseleniumwebautomation

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

javascriptphpjqueryhtmlcss

The default action is not triggered when the click event occurs

Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...

javascriptjqueryhtmlevents

What are some ways to implement smooth scrolling when a navigation link is clicked?

I have a total of 3 links in my navigation bar and every time they are clicked, I want the page to smoothly scroll down to their designated section on the webpage. Although I have already set up the anchors, I lack experience in scripting to create the smo ...

javascripthtmlcssimagemodal-dialog

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Generating an HTML table by retrieving information from a database with the help of PHP

I have been working on a project that involves extracting data from a SQL database using PHP and then creating an HTML table based on that data. This table is designed to list the items I am selling, along with their costs, weights, and other relevant deta ...

phphtmlmysql

Converting Beautifulsoup4's findAll() method output of HTML into a list of strings using Python

I'm just starting to explore Python, as I have a project idea in mind that I believe could be achieved by web crawling with Python. Currently following a tutorial series, I know that some consider findAll() to be outdated (I'm not sure why, but ...

pythonhtmlif-statementpython-3.xweb-crawler