How to neutralize CSS definitions without overriding

Is there a way to neutralize CSS rules for an element without overriding everything?

For example, I use Twitter Bootstrap and has many predefined CSS definitions for table. In some places I do not want them.

In some elements, tableI wonder if I can do something like this:

<table style="default"></table>
+3
source share
4 answers

You cannot neutralize CSS rules without overriding. Therefore, you should do what was suggested in the answers above.

+1
source

Bootstrap has only a little CSS for the element <table>:

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

, -:

table.strapless{
  max-width: 100%;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

table.strapless table, , .

css, :

<table class="strapless">
+7

CSS .

table.black {
    background-color:black;
}

table.default {
    background-color:white;
}

, , .

<table class="default">

<table class="black">

, CSS . , CSS . , CSS CSS, - CSS. , , , CSS table.default table.black.

0

- CSS, , , . , , , CSS.

To override the Bootstrap stylesheet with the new CSS rules in your mysite.css stylesheet, make sure that the stylesheet is placed further down in your HTML page than in the bootstrap.css file. Like this:

External:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/assets/css/mysite.css" rel="stylesheet" type="text/css">
</head>
</html>

If you do not want to go along the external stylesheet, then using the "inline" rules, as you suggested in your question, will work (for example, override bootstrap.css) too:

Inline:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
  <table>
      <tr>
         <td style="border-top: 1px solid red;"></td>
         <td></td>
     </tr> 
  </table>
</body>
</html>
0
source

All Articles