Using Bootstrap 3 how can I hide columns in my table?

前端 未结 3 1330
Happy的楠姐
Happy的楠姐 2021-02-11 18:01

I\'m trying to hide columns for my responsive design when in col-xs and col-sm. I first attempted to use hidden-xs/hidden-sm classes, but

3条回答
  •  天涯浪人
    2021-02-11 18:20

    The code should work just fine. Bootstrap supports hiding/showing th and td with its responsive utility classes https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

    // Responsive utilities
    // -------------------------
    // More easily include all the states for responsive-utilities.less.
    .responsive-visibility() {
      display: block !important;
      tr& { display: table-row !important; }
      th&,
      td& { display: table-cell !important; }
    }
    
    .responsive-invisibility() {
      display: none !important;
      tr& { display: none !important; }
      th&,
      td& { display: none !important; }
    }
    

    The code works in this jsFiddle: http://jsfiddle.net/A4fQP/

提交回复
热议问题