Using JavaScript to adjust the width of the table header

I have a table that I need to adjust the width of using JavaScript or jQuery.

<div class="dataTables_scrollHeadInner" >  
        <table class="table table-condensed table-bordered table-striped dataTable no-footer" >   
            <thead class="bg-gray-active1">  
                <tr role="row">  
                    <th class="sorting_disabled" >Serial</th>  
                    <th class="sorting_disabled" >dsad</th>  
                    <th class="sorting_disabled" >vg</th>  
                    <th class="sorting_disabled" >sdfg</th>  
                </tr>  
            </thead>  
        </table>  
    </div>

Specifically, I need the first <th> element to be 53px in width,

the second <th> element to be 152px in width,

the third <th> element to be 500px in width, and

the fourth <th> element to be 100px in width.

javascriptjqueryhtmlcss

Answer №1

You have the option to utilize jQuery.

$( "tr th:nth-child(1)" ).attr("width","53"); 
$( "tr th:nth-child(2)" ).attr("width","152"); 
$( "tr th:nth-child(3)" ).attr("width","500"); 
$( "tr th:nth-child(4)" ).attr("width","100");

This code selects all tr elements that contain a child th with a specific numerical position.

The .attr function is used for adding HTML attributes. For more information, visit http://www.w3schools.com/jquery/html_attr.asp.

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

JQuery: Issue with Passing Value in a Select Query

I am having trouble passing the selected value from a drop-down list to a select query on another page. Although the drop-down boxes are populated successfully, they do not filter the comments by topic ID as expected. My goal is to pass the chosen value fr ...

phpjquerymysqlajax

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

Issues with AJAX formData functionality

I'm having difficulties with the formData in my Ajax calls. I have searched extensively for solutions and tried various approaches, including using getElementById, but nothing seems to work. The form in question has an id of add-lang-form: <form ...

javascriptphpjqueryajax

Unable to establish an external connection with the node

Currently, I am in the process of establishing a connection to a local server and running an app on port 8080 using node. Both node and apache are installed on my system. When Apache is active, I can access the server externally. However, when Node is runn ...

javascriptnode.jsapacheexpress

Combining CSS and HTML with IE10

With the release of Windows8 and IE10 as developer previews, I am curious about what features IE10 does not support that IE9/8 did, as well as what new features it now supports. Thank you for your assistance! ...

htmlcssinternet-explorer-10

In Safari, only the 419 error is returned when using $.ajax, while it functions properly in Chrome and Firefox

Encountering a puzzling issue with an ajax call on a Laravel blade page. The call functions perfectly on Chrome and Firefox, yet consistently returns a 419 error when using Safari. After exploring various solutions provided in different threads on Stack Ov ...

phpjqueryajaxlaravel

Tips on combining multiple HTML tags within a single div element

After extracting a value from an XML document using Javascript, I encountered a problem while attempting to generate multiple image tags based on that value. Despite my attempt with a for loop, only one image was being displayed. for(i=0; i<red; i++){ ...

javascripthtmldom

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

javascripthtmlcss

Leverage the https module within your React Native application

How can I integrate the https standard library module from Node.js into a React Native project? Specifically, I need to use https.Agent for axios. Is there a recommended approach for achieving this integration? ...

javascriptandroidnode.jsreact-native

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

cssangularbootstrap-5bootstrap-accordion

Error in validating Bootstrap 3 Datepicker and DateTime data

I have implemented Bootstrap 3 Datepicker () to display a DateTime Picker for a specific model property: Model: [Table("Calls")] public partial class Call { [Key] [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] public int Id { ...

c#jquerytwitter-bootstrapdatetimedatepicker

Achieving equal height for two divs and centering them

Is it possible to align the height of two floated divs so that the second div slips down, and the container width automatically adjusts to fit the child width while centering the divs? I apologize for any language errors. :( <!DOCTYPE html PUBLIC "-//W ...

htmlcsscss-float

What is the reason behind React deciding to skip the final question, even though it has been accurately saved to the

A simple web application was developed to calculate risk scores by asking five questions, with additional points awarded if a checkbox is checked. Despite extensive hours spent debugging, a persistent bug remains: the final question does not appear on the ...

javascriptreactjs

What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front: <v-text-field ...

cssvue.jsvuetify.js

JavaScript/jQuery Tutorial: Accessing the src attribute of images sharing a common class名

How can I extract the src values of images with the same class and display them in an empty div? For instance: <body> <img class="class1" src="http://www.mysite.com/img/image1.jpg" width="168" height="168" alt=""> <img class="class ...

javascriptjqueryhtml

Avoiding the overflow of the y-axis by applying a slight left margin to bootstrap columns

Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Issue encountered when attempting to transfer data to MongoDB using custom API

Currently, I have been working on a flutter application that is designed to send data to my custom API built in node js. This API then forwards the data to a MongoDB cluster. While testing the API, everything was functioning correctly and the data was succ ...

javascriptnode.jsmongodbflutterapi

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

The EXIF-JS data is becoming inaccessible beyond the method's scope

Currently, I am in the process of developing a web application using Angular 8. My main objective is to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. However, when attempting to acces ...

javascriptangulartypescriptexif-js

Font on the internet that does not have the specific Germanic di

Just recently I purchased a new font and was excited to use it on my website using web fonts. However, upon closer inspection, I noticed that the umlauts such as ä, ü, and ö were missing from the font, leaving empty spaces where those characters should ...

cssfontstypography