Table Width Issue - Material Design For Bootstrap

Trang chủ » Html Stretch Table To Full Width » Table Width Issue - Material Design For Bootstrap

Có thể bạn quan tâm

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Table width issue

architech priority asked 5 years ago

Expected behavior Table will strech entire width of the screen Actual behavior table is confied to some unknown width table is in card element but doesn't stretch entire width of the card

**Resources (screenshots, code snippets etc.)** <mdb-card-body cascade="true"> <table class="table table-responsive" mdbTable hover="true" responsive="true"> <thead class="thead-dark w-100"> <tr> ... </tr> </thead> <tbody class="w-100"> ...

enter image description here Table does not expand the full width of the card - that is, table is full width, but thead and tbody are not

Add comment

architech priority answered 5 years ago

0 0 Best answer

Hi, It worked after I moved table-responsive to the wrapper and removed all classes that were "width" related.

Please insert min. 20 characters. Post

Hi, It worked after I moved table-responsive to the wrapper and removed all classes that were "width" related.

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi @architech,

Can you loop up for this example: https://mdbootstrap.com/docs/angular/tables/responsive/#always-responsive ?

I think always responsive example is good for you. Also, you can edit structure of HTML code, for example table-responsive class must be placed in wrapper.

Please insert min. 20 characters. Post

Hi @architech,

Can you loop up for this example: https://mdbootstrap.com/docs/angular/tables/responsive/#always-responsive ?

I think always responsive example is good for you. Also, you can edit structure of HTML code, for example table-responsive class must be placed in wrapper.

Add comment Write Create snippet Please insert min. 20 characters. Post

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: desktop
  • Browser: Chrome
  • OS: win
  • Provided sample code: No
  • Provided link: No
Tags table full-width responsive About author
architech
70Support score 12Questions 1Answers 0Snippets
Snippet settings
MDB Technology MDB Version Type Go Pro Public Private You can add max. 10 tags with min. length of 2 each Close Create

Từ khóa » Html Stretch Table To Full Width