How to set the size of a column in a Bootstrap responsive table

Question

How do you set the size of a column in a Bootstrap responsive table  I don t want the table to loose its reponsive features  I need it to work in IE8 as well  I have included HTML5SHIV and Respond   I m using Bootstrap 3  3 2 0    lt div class  table-responsive  gt       lt table id  productSizes  class  table  gt           lt thead gt               lt tr gt                   lt th gt Size lt  th gt                   lt th gt Bust lt  th gt                   lt th gt Waist lt  th gt                   lt th gt Hips lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt 6 lt  td gt                   lt td gt 79 - 81 lt  td gt                   lt td gt 61 - 63 lt  td gt                   lt td gt 89 - 91 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 8 lt  td gt                   lt td gt 84 - 86 lt  td gt                   lt td gt 66 - 68 lt  td gt                   lt td gt 94 - 96 lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt

User · Answer

you can use the following Bootstrap class with    lt tr class  w-25  gt    lt  tr gt    for more details check the following page https   getbootstrap com docs 4 1 utilities sizing

User · Answer

Bootstrap 4 0  Be aware of all migration changes from Bootstrap 3 to 4  On the table you now need to enable flex box by adding the class d-flex  and drop the xs to allow bootstrap to automatically detect the viewport    lt div class  container-fluid  gt       lt table id  productSizes  class  table  gt           lt thead gt               lt tr class  d-flex  gt                   lt th class  col-1  gt Size lt  th gt                   lt th class  col-3  gt Bust lt  th gt                   lt th class  col-3  gt Waist lt  th gt                   lt th class  col-5  gt Hips lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr class  d-flex  gt                   lt td class  col-1  gt 6 lt  td gt                   lt td class  col-3  gt 79 - 81 lt  td gt                   lt td class  col-3  gt 61 - 63 lt  td gt                   lt td class  col-5  gt 89 - 91 lt  td gt               lt  tr gt               lt tr class  d-flex  gt                   lt td class  col-1  gt 8 lt  td gt                   lt td class  col-3  gt 84 - 86 lt  td gt                   lt td class  col-3  gt 66 - 68 lt  td gt                   lt td class  col-5  gt 94 - 96 lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt      bootply  Bootstrap 3 2  Table column width use the same layout as grids do  using col- viewport - size   Remember the column sizes should total 12  1   3   3   5   12 in this example            lt thead gt               lt tr gt                   lt th class  col-xs-1  gt Size lt  th gt                   lt th class  col-xs-3  gt Bust lt  th gt                   lt th class  col-xs-3  gt Waist lt  th gt                   lt th class  col-xs-5  gt Hips lt  th gt               lt  tr gt           lt  thead gt    Remember to set the  lt th gt  elements rather than the  lt td gt  elements so it sets the whole column  Here is a working BOOTPLY   Thanks to  Dan for reminding me to always work mobile view  col-xs-   first

User · Answer

You could use inline styles and define the width in the  lt th gt  tag   Make it so that the sum of the widths   100         lt tr gt           lt th style  width 10   gt Size lt  th gt           lt th style  width 30   gt Bust lt  th gt           lt th style  width 50   gt Waist lt  th gt           lt th style  width 10   gt Hips lt  th gt       lt  tr gt    Bootply demo  Typically using inline styles is not ideal  however this does provide flexibility because you can get very specific and granular with exact widths

[css] How to set the size of a column in a Bootstrap responsive table

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3