CODEWITHSUNDEEP
css
Stackedup
Stackedup

Reputation: 760

How to get the inner table ignore the inherited styles

I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?

Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.

        #myTable td, #myTable th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            word-wrap: break-word;
        }

        #myTable th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #00bf11;
            color: white;
        }

        #myTable {
            border-collapse: collapse; 
            width: 100%; 
            border: 1px solid #ddd;
            font-size: 12px; 
            font-family: Verdana, sans-serif;
            table-layout: fixed;
        }
<html>
  <body>
    <table id="myTable">
            <tr class="header">
                <th onclick="sortTable(0)" style="width:6%;">Col1</th>
                <th onclick="sortTable(1)" style="width:9%;">Col2</th>
                <th onclick="sortTable(2)" style="width:85%;">Col3</th>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th>Col One</th>
                      <th>Col Two</th>
                      <th>Col Three</th>
                    </tr>
                    <tr>
                      <td>One</td>
                      <td>Two</td>
                      <td>Three</td>
                    </tr>
                  </tbody>
                </table>
              </td>
    </table>
  </body>
</html>

Upvotes: 2

Views: 450

Answers (2)

dscham
dscham

Reputation: 567

Deryck has the right answer altough it's not complete because of browser implementation and missing tr

#myTable > tbody > tr > td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  word-wrap: break-word;
}

#myTable > tbody > tr > th {
  border: 1px solid #ddd;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #00bf11;
  color: white;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  table-layout: fixed;
}
<html>

<body>
  <table id="myTable">
    <tr class="header">
      <th onclick="sortTable(0)" style="width:6%;">Col1</th>
      <th onclick="sortTable(1)" style="width:9%;">Col2</th>
      <th onclick="sortTable(2)" style="width:85%;">Col3</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>
        <table class="table table-bordered">
          <tbody>
            <tr>
              <th>Col One</th>
              <th>Col Two</th>
              <th>Col Three</th>
            </tr>
            <tr>
              <td>One</td>
              <td>Two</td>
              <td>Three</td>
            </tr>
          </tbody>
        </table>
      </td>
  </table>
</body>

</html>

Upvotes: 2

Deryck
Deryck

Reputation: 7658

If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable

        #myTable > td, #myTable > th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            word-wrap: break-word;
        }

        #myTable > th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #00bf11;
            color: white;
        }

        #myTable {
            border-collapse: collapse; 
            width: 100%; 
            border: 1px solid #ddd;
            font-size: 12px; 
            font-family: Verdana, sans-serif;
            table-layout: fixed;
        }
<html>
  <body>
    <table id="myTable">
            <tr class="header">
                <th onclick="sortTable(0)" style="width:6%;">Col1</th>
                <th onclick="sortTable(1)" style="width:9%;">Col2</th>
                <th onclick="sortTable(2)" style="width:85%;">Col3</th>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th>Col One</th>
                      <th>Col Two</th>
                      <th>Col Three</th>
                    </tr>
                    <tr>
                      <td>One</td>
                      <td>Two</td>
                      <td>Three</td>
                    </tr>
                  </tbody>
                </table>
              </td>
    </table>
  </body>
</html>

Upvotes: 1

Related Questions