How to set up fixed width for td

Question

Simple scheme      lt tr class  something  gt       lt td gt A lt  td gt       lt td gt B lt  td gt       lt td gt C lt  td gt       lt td gt D lt  td gt     lt  tr gt    I need to set up a fixed width for  lt td gt   I ve tried   tr something     td       width  90px          Also  td something     width  90px      for    lt td class  something  gt B lt  td gt    And even   lt td style  width  90px   gt B lt  td gt    But the width of  lt td gt  is still the same

User · Answer

Bootstrap 4 0 On Bootstrap 4 0  we have to declare the table rows as flex-boxes by adding class d-flex  and also drop xs  md  suffixes to allow Bootstrap to automatically derive it from the viewport  So it will look following   lt table class  quot table quot  gt       lt thead gt           lt tr class  quot d-flex quot  gt               lt th class  quot col-2 quot  gt  Student No   lt  th gt               lt th class  quot col-7 quot  gt  Description  lt  th gt               lt th class  quot col-3 quot  gt  Amount  lt  th gt           lt  tr gt       lt  thead gt        lt tbody gt           lt tr class  quot d-flex quot  gt               lt td class  quot col-2 quot  gt test lt  td gt               lt td class  quot col-7 quot  gt Name here lt  td gt               lt td class  quot col-3 quot  gt Amount Here  lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   Hope this will be helpful to someone else out there  Cheers

User · Answer

If you re using  lt table class  table  gt  on your table  Bootstrap s table class adds a width of 100  to the table  You need to change the width to auto   Also  if the first row of your table is a header row  you might need to add the width to th rather than td

User · Answer

x000D   x000D   lt div class  row  id  divcashgap  style  display none  gt  x000D                   lt div class  col-md-12  gt  x000D                       lt div class  table-responsive  gt  x000D                           lt table class  table table-default  id  gvcashgapp  gt  x000D                               lt thead gt  x000D                                   lt tr gt  x000D                                       lt th class  1  gt BranchCode lt  th gt  x000D                                       lt th class  2  gt  lt a gt TC lt  a gt  lt  th gt  x000D                                       lt th class  3  gt VourNo lt  th gt  x000D                                       lt th class  4   style  min-width 120px   gt VourDate lt  th gt  x000D                                       lt th class  5  style  min-width 120px   gt RCPT Date lt  th gt  x000D                                       lt th class  6  gt RCPT No lt  th gt  x000D                                       lt th class  7  gt  lt a gt PIS No lt  a gt  lt  th gt  x000D                                       lt th class  8  style  min-width 160px   gt RCPT Ammount lt  th gt  x000D                                       lt th class  9  gt Agging lt  th gt  x000D                                       lt th class  10  style  min-width 160px   gt DesPosition Days lt  th gt  x000D                                       lt th class  11  style  min-width 150px   gt Bank Credit Date lt  th gt  x000D                                       lt th class  12  gt Comments lt  th gt  x000D                                       lt th class  13  style  min-width 150px   gt BAC Comment lt  th gt  x000D                                       lt th class  14  gt BAC Ramark lt  th gt  x000D                                       lt th class  15  style  min-width 150px   gt RAC Comment lt  th gt  x000D                                       lt th class  16  gt RAC Ramark lt  th gt  x000D                                       lt th class  17  style  min-width 120px   gt Update Status lt  th gt  x000D                                   lt  tr gt  x000D                               lt  thead gt  x000D                               lt tbody id  tbdCashGapp  gt  lt  tbody gt  x000D                           lt  table gt  x000D                       lt  div gt  x000D                   lt  div gt  x000D               lt  div gt  x000D   x000D   x000D

User · Answer

Try this -   lt style gt   table   table-layout  fixed     table th  table td   overflow  hidden     lt  style gt

User · Answer

In bootstarp 4 you can use row and col-  in table  I use it as below   lt table class  table  gt       lt thead gt           lt tr class  row  gt               lt th class  col-sm-3  gt 3 row lt  th gt               lt th class  col-sm-4  gt 4 row lt  th gt               lt th class  col-sm-5  gt 5 row lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr class  row  gt               lt td class  col-sm-3  gt some text lt  td gt               lt td class  col-sm-4  gt some text lt  td gt               lt td class  col-sm-5  gt some text lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

in Bootstrap Table 4 x If you are creating the table in the init parameters instead of using HTML  You can specify the width parameters in the columns attribute     quot table quot   bootstrapTable       columns              field   quot title quot   title   quot title quot   width   quot 100px quot

User · Answer

Use d-flex instead of row for  tr  in Bootstrap 4  The thing is that  row  class takes more width then the parent container  which introduces issues    x000D   x000D   lt table class  table  gt  x000D     lt tbody gt  x000D       lt tr class  d-flex  gt  x000D         lt td class  col-sm-8  gt Hello lt  td gt  x000D         lt td class  col-sm-4  gt World lt  td gt  x000D       lt  tr gt  x000D       lt tr class  d-flex  gt  x000D         lt td class  col-sm-8  gt 8 columns lt  td gt  x000D         lt td class  col-sm-4  gt 4 columns lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

In my case I was able to fix that issue by using min-width  100px instead of width  100px for the cells th or td    table td   table th       min-width  100px

User · Answer

Instead of applying the col-md-  classes to each td in the row you can create a colgroup and apply the classes to the col tag        lt table class  table table-striped  gt           lt colgroup gt               lt col class  col-md-4  gt               lt col class  col-md-7  gt           lt  colgroup gt           lt tbody gt           lt tr gt               lt td gt Title lt  td gt               lt td gt Long Value lt  td gt           lt  tr gt           lt  tbody gt       lt  table gt    Demo here

User · Answer

use fixed table layout css in table  and set a percent of the td

User · Answer

None of this work for me  and have many cols on datatable to make   or sm class equals to 12 elements layout on bootstrap   I was working with datatables Angular 5 and Bootstrap 4  and have many cols in table  The solution for me was in the TH to add a DIV element with a specific width  For example for the cols  Person Name  and  Event date  I need a specific width  then  put a div in the col header  the entire col width then resizes to the width specified from the div on the TH     lt table datatable  dtOptions   dtOptions   ngIf  listData  class  table table-hover table-sm table-bordered text-center display  width  100   gt       lt thead class  thead-dark  gt           lt tr gt               lt th scope  col  gt ID  lt  th gt               lt th scope  col  gt Value lt  th gt               lt th scope  col  gt  lt div style  width  600px   gt Person Name lt  div gt  lt  th gt               lt th scope  col  gt  lt div style  width  800px   gt Event date lt  div gt  lt  th gt

User · Answer

use  something without td or th   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt title gt Bootstrap Example lt  title gt   x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt    x000D     lt style gt  x000D       something   x000D        width  90px  x000D        background  red  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Fixed width column lt  h2 gt              x000D     lt table class  table table-bordered  gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th class  something  gt Firstname lt  th gt  x000D           lt th gt Lastname lt  th gt  x000D           lt th gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Doe lt  td gt  x000D           lt td gt john example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Mary lt  td gt  x000D           lt td gt Moe lt  td gt  x000D           lt td gt mary example com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt July lt  td gt  x000D           lt td gt Dooley lt  td gt  x000D           lt td gt july example com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is how I often do when I don t have to deal with IE       lt tr gt         lt th scope  col  style  width  calc 1   100    12   gt   lt  th gt         lt th scope  col  style  width  calc 4   100    12   gt Website lt  th gt         lt th scope  col  style  width  calc 3   100    12   gt Username lt  th gt         lt th scope  col  style  width  calc 3   100    12   gt Password lt  th gt         lt th scope  col  style  width  calc 1   100    12   gt Action lt  th gt       lt  tr gt    That way you can have a familiar 12-col grid

User · Answer

Hopefully this one will help someone    lt table class  table  gt     lt thead gt       lt tr gt         lt th style  width  30   gt Col 1 lt  th gt         lt th style  width  20   gt Col 2 lt  th gt         lt th style  width  10   gt Col 3 lt  th gt         lt th style  width  30   gt Col 4 lt  th gt         lt th style  width  10   gt Col 5 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt Val 1 lt  td gt         lt td gt Val 2 lt  td gt         lt td gt Val 3 lt  td gt         lt td gt Val 4 lt  td gt         lt td gt Val 5 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    https   github com twbs bootstrap issues 863

User · Answer

For Bootstrap 4  you can simply use the class helper    lt table class  table  gt     lt thead gt       lt tr gt         lt td class  w-25  gt Col 1 lt  td gt         lt td class  w-25  gt Col 2 lt  td gt         lt td class  w-25  gt Col 3 lt  td gt         lt td class  w-25  gt Col 4 lt  td gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt

User · Answer

I ve been struggling with the issue for a while  so just in case when someone makes the same stupid mistake as me    Inside the  lt td gt  I had the element with white-space pre style applied  That made all my table tr td tricks discarded  When I removed that style  suddenly all my text was nicely formatted inside the td   So  always check the main container  like table or td  but also  always check if you don t cancel your beautifull code somewhere deeper

User · Answer

Hard to judge without the context of the page html or the rest of your CSS  There might be a zillion reasons why your CSS rule is not affecting the td element   Have you tried more specific CSS selectors such as  tr somethingontrlevel td something     width  90px      This to avoid your CSS being overridden by a more specific rule from the bootstrap css    by the way  in your inline css sample with the style attribute  you misspelled width - that could explain why that try failed

User · Answer

This combined solution worked for me  I wanted equal width columns   lt style type  text css  gt       table           table-layout  fixed          word-wrap  break-word                 table th  table td               overflow  hidden              lt  style gt    Result  -

User · Answer

Ok  I just figured out where was the problem - in Bootstrap is set up as a default value width for select element  thus  the solution is   tr  something     td       select         width  90px                Anything else doesn t work me

User · Answer

For Bootstrap 4 0   In Bootstrap 4 0 0 you cannot use the col-  classes reliably  works in Firefox  but not in Chrome   You need to use OhadR s answer    lt tr gt     lt th style  width  16 66   gt Col 1 lt  th gt     lt th style  width  25   gt Col 2 lt  th gt     lt th style  width  50   gt Col 4 lt  th gt     lt th style  width   8 33   gt Col 5 lt  th gt   lt  tr gt    For Bootstrap 3 0   With twitter bootstrap 3 use  class  col-md-   where   is a number of columns of width    lt tr class  something  gt       lt td class  col-md-2  gt A lt  td gt       lt td class  col-md-3  gt B lt  td gt       lt td class  col-md-6  gt C lt  td gt       lt td class  col-md-1  gt D lt  td gt   lt  tr gt    For Bootstrap 2 0   With twitter bootstrap 2 use  class  span   where   is a number of columns of width    lt tr class  something  gt       lt td class  span2  gt A lt  td gt       lt td class  span3  gt B lt  td gt       lt td class  span6  gt C lt  td gt       lt td class  span1  gt D lt  td gt   lt  tr gt       If you have  lt th gt  elements set the width there and not on the  lt td gt  elements

User · Answer

I was having the same issue  I made the table fixed and then specified my td width  If you have th you can do those as well   table       table-layout  fixed      word-wrap  break-word      Template    lt td style  width 10   gt content lt  td gt    Please use CSS for structuring any layouts

[css] How to set up fixed width for <td>?

Bootstrap 4.0

Examples related to css

Examples related to twitter-bootstrap

Examples related to width

Examples related to html-table