Centering content within a <th> tag

Hey there, I'm currently facing an issue with aligning a div inside another one.

To illustrate the problem, I've set up a small fiddle which you can check out here: https://jsfiddle.net/jpq7xzoz/

The challenge arises when using the jQuery tablesort-Plugin and including some buttons in the header within a separate div. For example, a search icon to toggle the filter visibility.

<th class="header" style="text-align: center">
     <div class="header-inner">Patchlevel</div>
     <div class="header-inner-filter">
          <button class="filterButton"></button>
     </div>
</th>

However, if the columns have different sizes and auto-size adjust, the button's div may wrap onto a new line. The desired result is for the button to remain on the same line as the background image and description text.

I've attempted various display styles and white-space properties without any luck in resolving this issue.

Any suggestions on how I could tackle this problem?

Thank you, Felix

jqueryhtmlcss

Answer №1

Instead of relying on floats, consider using display: table-cell:

table {
  background-color: #fff;
  margin: 10px 0 15px;
  text-align: left;
}
.header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 18px 4px 4px;
  white-space: nowrap;
  cursor: pointer;
}
.header-inner-filter {
  display: table-cell;/*remove float and add table-cell*/
  height: 20px;
  vertical-align: middle;
}
.header-inner {
  display: table-cell;/*remove float and add table-cell*/
}
.filterButton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTM...
  border: none;
  background-color: Transparent;
  cursor: pointer;
}
table,
th,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 3px;
}
<table>
  <THEAD>
    <tr>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patchlevel</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patcheintrag</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Informationen</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Handulungsempfehlung</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
    </tr>
  </THEAD>
  <TBODY>
    <tr>
      <td style="text-align: center">3</td>
      <td style="text-align: center">1</td>
      <td>Lorem ipsum dolor sit amet...</td>
      <td>Lorem ipsum dolor sit amet...</td>
    </tr>
  </TBODY>
</table>

Answer №2

Hello there! Consider utilizing negative margin. Here is an example:

.header-inner {margin-right:50px;}
.header-inner-filter {margin-left:-40px;}

You can adjust the values (50px and -40px) as needed.

Answer №3

Apply the style display:inline-block to both .header-inner and .header-inner-filter

table {
  background-color: #fff;
  margin: 10px 0 15px;
  text-align: left;
}
.header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 18px 4px 4px;
  white-space: nowrap;
  cursor: pointer;
}
.header-inner-filter {
  display: inline-block;
  height: 20px;
  padding-left: 50px;
}
.header-inner {
  display: inline-block;
}
.filterButton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTMh2EGulWQZP/e0q2sLCOSe6CU177ig+KNhkUobp6MyBW9N6N/ZjVXrvfDAj7QNTEolytS/wq89ROEsmSacLYsI80WygNAsPpknnHryC/EXoeLKpmsfAAAAAElFTkSuQmCC');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  border: none;
  background-color: Transparent;
  cursor: pointer;
  vertical-align: top;
}
table,
th,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
  margin-top: 3px;
  margin-bottom: 3px;
}
<table>
  <THEAD>
    <tr>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patchlevel</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Patcheintrag</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Informationen</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
      <th class="header" style="text-align: center">
        <div class="header-inner">Handulungsempfehlung</div>
        <div class="header-inner-filter">
          <button class="filterButton"></button>
        </div>
      </th>
    </tr>
  </THEAD>
  <TBODY>
    <tr>
      <td style="text-align: center">3</td>
      <td style="text-align: center">1</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>
  </TBODY>
</table>

Answer №4

Adjust the CSS properties for both div elements.

.header-inner-filter {
    height: 20px;
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-left: 5px;
}
.header-inner {
    display: inline-block;
    width: 70%;
    vertical-align: top;
}

Check out this FIDDLE link for more details.

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

Selecting elements by class in jQuery using a variable for the class name

Is there a way in jQuery to apply actions to all elements with a specific class, where the class name is determined by a variable? I want to select elements based on this dynamically generated class name. var x = $(this).attr('href').slice(1); ...

javascriptjqueryjquery-selectors

What is the best way to extract the lodash score from a URL using JSON parsing?

Can someone help me figure out how to extract and store the names from a URL into an array, then parse JSON data to retrieve the lodash score and convert it into a whole number? Any assistance would be greatly appreciated. <head> <title> ...

javascriptjqueryjsonajax

I'm looking for recommendations on where to begin learning about JavaScript touch events for web development. Any suggestions?

Seeking guidance on creating image galleries and content sliders that work with both touch and mouse events. Where should I begin exploring touch event implementation? I'm having difficulty locating official documentation. Are there any jQuery-suppo ...

javascriptjqueryeventsmobiletouch

The functionality of HTML5 canvas image objects is not functioning as expected

I have been working on a function to retrieve an image object using HTML5 canvas, but I keep encountering an error alert (onerror event) function FetchImage() { var img = new Image(); img.src = "http://localhost/assets/images/loadedsprite.png"; ...

javascripthtmlcanvas

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

Update: 27th December 2016 The heading has been modified because any DOM element can be the target, whether it is a <p> element or not. Additional information has been provided about the tools being used and the desired outcome. Are there nativ ...

javascripthtmlangularjsnode.jselectron

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

When transitioning from another page, the header will cover a portion of the section

I am facing a specific issue that I need help with. My goal is to have the navigation bar link to different sections of a single page when clicked. For example, clicking on "Contact" should take the user to the contact section, and then if they click on "A ...

javascriptjqueryhtml

Creating a blank grid using ng-repeat in angularJS

I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...

javascripthtmlangularjs

Encountering a 500 server error when using jQuery AJAX for a GET request

Check out the flask python code here: Also, take a look at the html+js in the index.html template: An issue arises where everything runs smoothly on the local Flask server but encounters a 500 error when attempting to search after deployment with Apache ...

jquerypythonajaxflask

Enhance an existing webpage by integrating ajax with jquery-ui

I'm seeking assistance with integrating an advanced search feature into an existing webpage system. It appears that there is a complication with the current jQuery UI being used on the page: <script src="js/jquery-ui-1.10.4.custom.js"> ...

javascriptjqueryajaxjquery-ui

What is the best way to choose the initial element in every group using jQuery?

If we have the following HTML input: <p>A</p> <p>B</p> <p>C</p> <div>D</div> <p>E</p> <p>F</p> <p>G</p> We can select B, C, F and G using the following code: $('p + ...

javascriptjqueryhtml

Issue with plugin conflicting with Vimeo's Froogaloop

I've integrated the Vimeowrap Playlist plugin to create a playlist of videos from a specific channel. Everything seems to be working smoothly in that aspect, but now I'm facing an issue with tracking video events such as play and pause. When atte ...

jqueryvimeovimeo-apivimeo-playerfroogaloop

The innovative way Vue.js revolutionizes HTML updates within a Websocket onmessage event

I'm new to Vue.js and I'm trying to capture data inside the onmessage event of a websocket and update an HTML component (either a span or div). While console.log or alert functions work in onmessage, I couldn't get it to update the span. Th ...

javascripthtmlvue.js

cusel.js encountered an error due to attempting to use the 'in' operator to search for 'using' within the specified error

I attempted to implement the cusel.js (styled selects) library on my select elements, but unfortunately it's not functioning as expected. The selects change visually, however when I try to scroll through the options using jscrollpane, an error that I ...

javascriptjqueryhtml

What are the best practices for utilizing the JQuery hasData() method effectively?

I have created a simple front-end web application where clicking a button triggers a GET Request to the Foursquare API, and then AJAX stores some of the response data into a div in the following manner: checkinsCount[i] = data.response.venues[i].stats.che ...

jqueryarraysajax

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

htmlcsslayout

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

Struggling to get a price calculator up and running efficiently

The code I have should be functioning, however, when I insert it into the code module in the Divi theme on WordPress, it doesn't work. Interestingly, when I try it in a notepad, it works perfectly fine but fails to function on the website itself. () ...

javascripthtml

Using node appendChild() in HTML for animating elements

As someone who is brand new to the world of web development, I am trying my hand at creating a webpage that expands as a button is clicked. Recently, I stumbled upon this helpful link which includes some code: The HTML code snippet is: <ul id="myList" ...

javascripthtmldomweb

resolving table refresh problem with the use of ajax, JQuery, and JSON

I have populated a set of records in HTML table format. Each row includes an anchor tag with a trash-can image at the last column. When this image is clicked, I want to delete the respective row and refresh the table with updated data. My approach involves ...

jqueryjsonajax