Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size.

This is my HTML code:

<p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks">
    <ng-container *ngFor="let col of colheaders">
        <p-column [field]="col.field" [header]="col.header" [style]="{'width':'100%'}" //setting width to 100% fails></p-column>
    </ng-container>
</p-dataTable>

Even after setting the width to 100%, it doesn't match the header size. Any suggestions on what else I need to add?

htmlcssangularprimeng

Answer №1

To properly set the width of the table, it is recommended to define it first before setting any specific styles on the column tag. Instead, consider configuring the width on the ng-container element within your HTML structure:

<p-dataTable .... [tableStyle]="{width: '380px','text-align':'center'}" ... >
  <ng-container style="width:100%" ...

Check out this DEMO - please note that this is just an illustrative example and not a direct representation of your code.

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

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Can microdata be applied to an element that embodies a pair of data points?

Can itemprop="name" and itemprop="contentURL" be included in the same element? For example: echo '<li itemscope itemtype="http://schema.org/AudioObject">'; echo ' <a itemprop="name" itemprop="contentURL" href="http://wav ...

htmlsearch-enginemicrodata

Angular 2 ngIf displaying briefly before disappearing

Encountering a strange issue with an Angular 2 ngIf statement where it appears on the page for a brief moment and then disappears. The content is visible, but it doesn't remain on the page. I suspect it might be related to some asynchronous behavior. ...

htmlangular

html distinguishing between various fields within a form

As a newcomer to website development, I am trying to enhance the readability of my form with fields. Currently, all the fields are displayed one after another without any separation. Is there a specific HTML function that can help group these fields toge ...

htmlcssstylesheet

Revamping the *ngIf Container

Seeking a more efficient way to refactor the code snippet below: <div class="container"> <icon class="icon" *ngIf="A || B"></icon> <div class="itemOne" *ngIf="A"></div> <div class="itemTwo" *ngIf="B"></di ...

angular

Personalize ng-multiselect-dropdown in order to establish connections with multiple model fields

Is there a way to customize the ng-multiselect-dropdown control in order to include a CodeField? This would be helpful for persisting model values during selection. ...

angularnpmangular-material

Customizing the color of cells in an HTML table within a JSON based on their status

Would you like to learn how to customize the color of cells in an HTML table based on the status of a college semester's course map? The table represents all the necessary courses for your major, with green indicating completed courses, yellow for cou ...

javascriptphphtmlmysqljson

What is the best way to activate a progress bar upon clicking a button in an HTML document?

Is it possible to make a progress bar start moving upon clicking a button using only HTML? I am new to coding (just started today) and would appreciate some guidance on how to achieve this. This is what I currently have: <input type="image" src="Butto ...

html

The z-index is preventing me from selecting a certain area

I'm currently facing a challenge with a Bootsrap card that seems to be unclickable and I am unable to type input into the form inside of it. The root cause appears to be related to the z-index that I used to position the card "behind" the header and f ...

htmlbootstrap-4

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Choosing the content within a div and inserting it into an email

I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...

javascriptphphtmlformsemail

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

I'm currently developing a PHP website that allows users to make comments similar to a blog, and I am specifically interested in restricting the use of certain HTML tags. Is there any existing library that can process user comments and output valid XH ...

phpjavascripthtmlxhtmlcomments

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

csshtmlmobile

What is the process for assigning an ID to an object by clicking on an adjacent link in Django?

Trying to set an identifier for a CSV file's name so that clicking on a link next to it will lead to viewing the file itself on another webpage. Encountering the error message 'QueryDict' object has no attribute 'objects' Please ...

pythonhtmldjangodjango-rest-frameworkdjango-views

What was the inspiration behind Spotify's section design?

Spotify has cleverly hidden the overflowing content without showing a scrollbar, allowing users to swipe through the list. How did they achieve this? I am currently using tailwindcss if that makes a difference. https://i.stack.imgur.com/z59yv.png ...

cssreactjstailwind-css

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

htmlcsswordpresshover

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

google-chromecss

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

Enhancing images by creating clickable sections in a more organized and efficient manner

Are there any other methods to make parts of an image clickable in a more organized way, aside from using the coordinates method or directly embedding images from Photoshop? <script> new el_teacher = ["candice","john"]; $(".teacher1").mouseenter(fu ...

javascriptjqueryhtmlcssclickable