Bootstrap table-condensed only for xs

Question

I'm trying to use table-condensed, but only when xs. I tried this, but no luck.

<table class="hidden-xs table">
<table class="hidden-sm hidden-md hidden-lg table table-condensed">

It hides the whole table for the 2nd one. Is there a way I can get condensed only in xs without repeating the entire table structure?

Answer 1

table-condensed doesn't do anything other than change the padding. Instead of duplicating the table, it would be better to add your own CSS class that works at the smallest (xs) breakpoint..

@media (max-width: 768px) {
  .table-condensed-xs > thead > tr > th,
  .table-condensed-xs > tbody > tr > th,
  .table-condensed-xs > tfoot > tr > th,
  .table-condensed-xs > thead > tr > td,
  .table-condensed-xs > tbody > tr > td,
  .table-condensed-xs > tfoot > tr > td {
    padding: 5px;
  }
}

http://codeply.com/go/5ndhSVOeeh

Or, you could override the existing table-condensed class like this..

@media (min-width: 768px) {
  .table-condensed > thead > tr > th,
  .table-condensed > tbody > tr > th,
  .table-condensed > tfoot > tr > th,
  .table-condensed > thead > tr > td,
  .table-condensed > tbody > tr > td,
  .table-condensed > tfoot > tr > td {
    padding: 10px;
  }
}