Making all tables use the same bootstrap classes

Question

So I want every table for my website to have the same bootstrap styling with

class="table table-striped table-hover "

However I don't really want to go into every table and put this in in case I want to change it in future. Is there a way for me to just set,

.table{
  /*Inherit all these classes*/
}

You can achieve this by using Less or Sass. See an Less example here: http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — pascalvgemert, Feb 12 '15 at 16:40

score 0 · Answer 1 · answered Feb 12 '15 at 16:54

You'd need to use LESS or SASS and make a mix-in for this. If you can't use LESS/SASS, you could overwrite .table as follows if you absolutely needed to, using something like this (pulled from BS 3.2):

/* .table-stripe styling */
.table > tbody > tr:nth-child(odd) > td, 
.table > tbody > tr:nth-child(odd) > th{
    background-color: #f9f9f9;
}

/* Default .table-hover behavior */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: #f5f5f5;
}

/* .table-hover styling for "active". 
    Repeat this block for Success, Info, Warning, Danger, etc. 
    using your preferred colors */
.table > tbody > tr > td.active:hover,
.table > tbody > tr > th.active:hover,
.table > tbody > tr.active:hover > td,
.table > tbody > tr:hover > .active,
.table > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

score 0 · Answer 2 · answered Feb 12 '15 at 17:04

You potentially could try combining all the rules from the

table table-striped table-hover

classes into one class, but you also need to capture the rulesets targeted by table table-striped table-hover child and descendant selectors also. So in the end you will end up creating way more work for yourself.

e.g. if you look at the boostrap CSS source here - https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L255

  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

these sub rules would also need to be rewritten.
I've shown 3 CSS rules.
If you do a search for the term .table in the bootstrap CSS there are 318 instances which would need to be resolved.

You could reduce that by compiling your own LESS or SASS, but you will still have to deal with the child and descendant issue.

Possible solution

If you have a decent text editor, that using live templates or something like emmet, just create a short cut like tab+ which the text editor expands out to table table-striped table-hover

Making all tables use the same bootstrap classes

2 Answers2

Possible solution