material 2 angular 4 table width does not apply inside mat-card

Question

I am using material 2 angular 4. I have a mat-card and a table inside it. the mat-card has a width set to 700px. and for table inside it to 650px with overflow-x:auto.

However, the table does not obey that and creating a problem for me. this is how it is coded:



  Import




 
   
          
                      
                              From Location
                              To Location
                              Product Type
                              TechnicalRevenue
                              Revenue(/yr)
                               Volume (/yr)
                               Volume Uom
                               Chargeable Weight (kgs/yr)
                                Shipmts (/yr)
                                Existing %
                                Awarded %
                                Service
                                Density
                                Density Copy Help
                                Responsible
                                Sales Branch
                                Service Name
                                Position of target warehouse revenue / yr
                                Position of target transportation revenue / yr
                                Product Split
                          
                          

                          
                               {{rev[0]}}
                               {{rev[1]}}
                               {{rev[2]}}
                               {{rev[3]}}
                               {{rev[4]}}
                               {{rev[5]}}
                               {{rev[6]}}
                               {{rev[7]}}
                               {{rev[8]}}
                               {{rev[9]}}
                               {{rev[10]}}
                               {{rev[11]}}
                               {{rev[12]}}
                               {{rev[13]}}
                               {{rev[14]}}
                               {{rev[15]}}
                               {{rev[16]}}
                               {{rev[17]}}
                               {{rev[18]}}
                               {{rev[19]}}

woodykiddy · Accepted Answer

You might want to try setting the table layout to fix by adding table-layout: fixed; to your inline style. Otherwise the cell would always size to its content and never overflow.

Also try to set the width and overflow-x on your wrapping div element instead of table element.

...

For horizontal scroll on table, can refer to this example, http://jsfiddle.net/5WsEt/

material 2 angular 4 table width does not apply inside mat-card

Answers (1)

Related Questions