Angular material: issue with alignment of table inside mat-expansion compared to other table

Hey there, I've encountered an issue on an Angular website where the columns in a table are not aligning properly. Does anyone have a solution for this problem? Thanks!

<div class="table-responsive ">
            <table class="table" style="width: 100%">
              <thead>
              <tr>
                <th scope="col" width="50">ID</th>
                <th scope="col" width="300">Book Name</th>
                <th scope="col" width="250">Total Book</th>
                <th scope="col" width="250">Date</th>
                <th scope="col" width="250">Remarks</th>
                <th scope="col" width="250">Booking Date</th>
                <th scope="col" width="250">Booking Status</th>
              </tr>
              </thead>
            </table>
          </div>

          <mat-accordion>
            <mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
                                 (closed)="panelOpenState = false">
              <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
                                          [expandedHeight]="customExpandedHeight">
                <table class="table ">
                  <tbody>
                  <tr>
                    <td class="tb-td-txt" width="50">12</td>
                    <td class="tb-td-txt" width="300">ABC</td>
                    <td class="tb-td-txt" width="250">100}</td>
                    <td class="tb-td-txt" width="250">10-11-2018</td>
                    <td class="tb-td-txt" width="250">Jhone Doe</td>
                    <td class="tb-td-txt" width="250">10-05-2019</td>
                    <td class="tb-td-txt" width="250">Completed</td>
                         </tr>
                  </tbody>
                </table>
              </mat-expansion-panel-header>
          </mat-accordion>
cssangularbootstrap-4angular-materialangular7

Answer №1

When working with the lower table as a child of .mat-expansion-panel, it's important to note that for the table outside of it, the padding should mimic padding:0 24px.

  • Additionally, due to the presence of a down arrow for mat-expansion-indicator, the padding on the right side needs to be increased by 8px.
  • For the bottom table inside the mat-expansion, setting the text-align to center provides a similar effect.
  • As a visual aid, red borders have been added to the <td> elements for better visibility.

Key CSS:

th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}

Access the complete working example on StackBlitz.

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

Convert JavaScript back into an HTML attribute

Is there a way to include a JavaScript code in an HTML attribute like shown below? <div class="xx" animation="yy" animate-duration="<script>Code goes here<script>" ...> </div> I'm struggling to figure it out, is there a solut ...

javascripthtmlcssattributeselement

Styling dates in React

How can I properly display the date in the correct format? I'm seeing the date displayed incorrectly on the screen as 32/03/2020, but the 32nd day doesn't exist. Below is the correct date format displayed in the image. I'm new to Reactjs, ...

cssreactjsreact-nativedatevalidation

What is the best way to retrieve the values from the dynamically generated inputs in my .component.ts file through *ngFor?

Hey there, I am trying to extract the values from my dynamically generated inputs. Can someone guide me on how to do this so that I can manipulate them in my .ts file? Below is the current code snippet from my blabla.component.html: <form #f="ngFo ...

angularfirebasengfor

Center the middle item in a flexbox column arrangement

I'm working on a layout where I have three items stacked vertically within a column. My goal is to center the middle item (green) in the column and have the other items positioned around it. Here's my current setup: .flex-row { display: fl ...

htmlcssflexbox

Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar. https://i.stack.imgur.com/PDvSv.png Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX Code: <nav class="mb-1 navbar navbar-expand-sm na ...

htmlcsstwitter-bootstrap

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried: https://example.com/jsfiddle HTML <div class="enzimskiprogramindex herbaprogramindex he ...

javascriptjqueryhtmlcss

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

What are the steps to integrate jQuery into an Angular 8 application?

I am currently working on an application that relies on SignalR for communication with a desktop application. In order to make use of SignalR, I include jQuery in my .ts file. However, after migrating from Angular 7 to Angular 8, it appears that this setup ...

javascriptnode.jsangulartypescriptangular8

Postponing the activation of toggleClass in jQuery until the completion of a slide animation

Having some trouble with the jQuery delay() function. I'm using it to pause a toggleClass action until after a slideUp animation on one of my divs, but it doesn't seem to be working as expected. I want a bar with rounded corners that expands whe ...

javascriptjqueryhtmlcssanimation

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...

javacssjsf-2

Switching the background hue of the chat box after each message

Does anyone know how to change the colors of each message in a chat window using CSS and HTML? I'm trying to customize my stream but can't figure it out. Here is an example for reference. ...

htmlcssstreamchattwitch

Adding a Click class can cause significant disruption to the entire CSS layout

I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...

cssreactjsreact-css-modules

Tips for incorporating moment.js library into an Angular 2 TypeScript application

I attempted to utilize TypeScript bindings in my project: npm install moment --save typings install moment --ambient -- save test.ts file content: import {moment} from 'moment/moment'; I also tried without using TypeScript bindings: npm inst ...

typescriptangular

Tips on preventing state sharing in Angular applications

Delving into the world of Angular has presented me with an intriguing issue. I've crafted a component dedicated to displaying a dialog, complete with its own template (HTML), CSS, and TypeScript files. Whenever a user clicks on an item within a list ...

angular

Dealing with a missing item in local storage in an Angular application

When working with local storage, I have a function that saves certain values and another method that reloads these values. However, what is the best approach to handle missing items in the local storage? This could happen if a user deletes an item or if it ...

angulartypescriptlocal-storagestoragelocal

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

How can I achieve rounded corners in Internet Explorer using JQuery?

I've tried using various plugins like curvycorners, DD_roundies, and behavior: url(ie-css3.htc);, but none of them seem to work properly. Can anyone suggest alternative methods for achieving rounded corners in IE? My website is designed to be resizabl ...

jquerycssinternet-explorerrounded-cornerscurvycorners

What is the best way to apply styling to the placeholder of an input element using Angular?

Is there a way to achieve something similar in Angular? [style.placeholder.color]="active ? 'white' : 'grey'" I'm looking to bind the placeholder pseudo element of an input element. How can I bind it to the style propert ...

angular

The JavaScript code created in CodePen doesn't seem to function properly when integrated into my website

During a learning program, I created a basic random quote generator. The code worked flawlessly on codepen.io. Using a simple JavaScript (jQuery) function, I displayed random quotes along with their authors, which were stored in an array. I ensured that t ...

javascripthtmljquerycssclick