javascript - Bootstrap rule and my class doesn't cooperate -


on page, use bootstrap. created table , has 3 classes, check it:

<!-- latest compiled , minified css -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    <!-- optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">    <!-- latest compiled , minified javascript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <table class="table table-striped table-bordered">    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>  </table>

now use code jquery. code added class highlight. class highlight:

.highlight {    background-color: orange;  }
<!-- latest compiled , minified css -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    <!-- optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">    <!-- latest compiled , minified javascript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <table class="table table-striped table-bordered">    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>    <tr>      <td>&nbsp</td>      <td>&nbsp</td>    </tr>  </table>

when table has 1 class: "table" it's working. must have table-striped , table-bordered. when is, highlight working numbers. how can fix that?

it's css specificity issue.

bootstrap applies alternating row class this:

.table-striped>tbody>tr:nth-of-type(odd)

you need specific or more.

row highlight example:

.table>tbody>tr.highlight>td {     // change background color here }

cell highlight example:

.table>tbody>tr>td.highlight {     // change background color here }

note: i'm assuming want highlight rows or cells, not entire table.


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more