why does table overlap its body on container?

Guest User

Hi Team

I have a container that has a table body and header, but i notice its overlapping the columns. Meaning where there are columns for EmailAddress etc its gets pushed to the right, i want those names to fit well to their columns so it can look nice to a user.


ss="modal-dialog modal-xl" role="document">
 class="modal-content">

    Select People and Groups
    


    
        
            
                
                
                    
                        
                        
                            
                        
                    
                
                
                    
                
            
            
                
                
                    Details
                
                
                    
                    
                        
                            
                                Display Name
                                E-mail Address
                                Title
                                Department
                                Presence
                                Work Phone
                                Location
                            
                        
                        
                            
                            
                                John Doe
                                [email protected]
                                Manager
                                Marketing
                                Available
                                123-456-7890
                                New York

Display Name	E-mail Address	Title	Department	Presence	Work Phone	Location
John Doe	[email protected]	Manager	Marketing	Available	123-456-7890	New York

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Accepted answer
To fix the overlapping issue and ensure that the column names align properly with their respective columns, you can make the following modifications to your code:
1. Add the table-responsive class to the table-container div. This class will make the table horizontally scrollable if the content exceeds the container's width.
Guest User2y ago
Thanks so much mate, it does what i expected i did some modification and looks great and fit well.