Centering <th> elements is key for achieving a visually appealing print layout

Is there a way to center align the header and body of a table when printing it? I am using datatable.

Here is how it currently looks:

Check out this screenshot

I have tried adding classes to the th tags in the HTML table, but they still appear aligned to the left when printed.

This is what I attempted:

I included a class in the table:

"columnDefs":[
        {
            "targets":[0,1,2,3],
            "orderable":false,
    className: "dt-head-center"
        },

Then, I styled the class like this:

.dt-head-center {
text-align: center;
}

Unfortunately, this approach did not work. Can someone please help me fix this issue?

htmlcssajaxdatatable

Answer №1

Resolved By utilizing customization.

customize: function (window) {
                $(window.document.body).find('table').addClass('display').css('font-size', '9px');
                $(window.document.body).find('tr:nth-child(odd) td').each(function(i){
                    $(this).css('background-color','#D0D0D0');
                });
                $(window.document.body).find('th,td').css('text-align','center');
            }

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

Interactive Material Icons with Hover Effects in CSS

I'm having trouble adding a hover effect to material icons in my code. Despite everything else looking good, the hover effect is not working as expected. Below is the code snippet I've been using: import ManageAccountsIcon from '@mui/icons-m ...

cssreactjsuser-interfacematerial-uihover

Can you explain the distinction between [att|=val] and [att~=val] in css?

Could someone help me differentiate between the [att|=val] and [att~=val] attributes in CSS? I'm having trouble grasping the concept. Thank you! ...

htmlcss

PHP and jQuery creating a three-tiered drop-down navigation menu

My task involves creating a jQuery dropdown menu using PHP-generated HTML from a database table of categories: cats (db table) <ul class="dropdown"> <?php $sql ='SELECT * FROM cats WHERE cat_parent = 0'; $result = $db->s ...

phpjqueryhtmlmysqldrop-down-menu

Steps for invoking a Node.js function from a distinct JavaScript function on the front end

I am currently working on a project that involves a node js backend (app.js) connected to an HTML, CSS, and Javascript frontend (script.js). Within my HTML file, I have a form that allows users to upload an image, triggering a function in script.js to han ...

javascriptjquerynode.jsajax

Dynamic JavaScript animation to retrieve the position of an element on-the-fly

I am currently exploring the world of animation in JavaScript and I have a few practical questions. In my script, I am attempting to "launch" a "rocket" upon clicking a "button". What I've observed is that although my function calculates values as int ...

javascripthtmlcssanimation

If the PHP function does not exist in jQuery, then take action

I am currently utilizing a form that activates a PHP function through jQuery in the following manner: jQuery('#subnewtideform').submit(ajaxSubmit_subnewtideform); function ajaxSubmit_subnewtideform(){ var subnewtideform = jQuery(this).seri ...

jqueryajaxwordpress

Images Are Failing to Load on the Webpage

I'm facing an issue with appending pictures of restaurants to dynamic div IDs. When I make the div ID static, the pictures show up fine from the server, but when I try to make it dynamic, the images don't get appended. Can someone please assist m ...

javascriptjqueryajaxjsoncordova

How can I retrieve the POST values using xmlhttp?

This is an example of AJAX functionality. xmlhttp.send("fname=Henry&lname=Ford"); UPDATE I am looking to extract values from text/input fields after the equals sign. The current setup shows the values directly written out. How can I retrieve and dis ...

jqueryajax

Optimizing Title Tags for Static Pages with Header Inclusion

Working on developing static web pages for a client who preferred not to use a content management system. These pages all have a shared header and footer php files. I am in need of creating unique title and meta description tags for each page, but I am un ...

phphtml

When an image is clicked, I would like it to redirect to a different page

In my slider image list, each image has an ID. If the ID becomes equal to a specific number, such as 24, I want that particular image to move to another page when clicked. Here is the code snippet: <?php $sql = "select * from ".$tblImages." Where cid= ...

phphtml

Synchronized loops in jQuery using the .each method

I'm having trouble getting the ajaxStop function in jquery to work. Any suggestions on how to make it fire? My goal is to iterate through each anchor tag and update some content within it. After that, I want to use the ajaxstop event to trigger a scr ...

javascriptjqueryajax

IE9: Enforce the browser and document modes of IE9

Currently in IE9, my webpage is rendering with the Browser Mode set to 'IE9 Compat View' and Document Mode as 'IE standards', causing issues with all canvas elements on the page. I have already ensured that I have included '' ...

htmlinternet-explorer-9

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

When the user presses the enter key to submit data, the Ajax page reloads

I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as int ...

javascriptajaxforms

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

The jQuery AJAX response consistently comes back empty

Hello, I'm currently working on creating an HTML form and I need to validate it before submitting the form action. However, when I use AJAX to respond, I keep receiving a blank message. Can anyone help me with this issue? $(function(){ $("#ajax-p ...

javascriptjqueryhtmlajaxvalidation

Struggling with PHP variables and AJAX JavaScript

Hey everyone, I've made some edits and have a new question regarding a similar issue. On test.php in my Apache server, I have a PHP script that connects to a database and retrieves data from a table. <?php $con = mysqli_connect("localhost", "user" ...

javascriptphpjqueryajax

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss

Updating your feed dynamically using Ajax in Rails 4.0: A step-by-step guide

I'm currently working on implementing ajax functionality for a sample app inspired by Michael Heart's book. I've set up a feed model controller, which is similar to microposts in his book. I'm attempting to use ajax for posting feeds, b ...

ajaxruby-on-rails-4feed