How can I create a nested table within a Bootstrap table without inheriting the parent "table" class?

Question

How can I create a nested table within a Bootstrap table without inheriting the parent "table" class?

I am facing an issue with two nested tables, where the parent table is styled using

class="table table-bordered table-hover"

from Bootstrap. However, the nested table inherits all the styles from the parent, causing conflicts as I need the nested table to have a different appearance without any Bootstrap styling.

Is there a quick and simple way to prevent the nested table from inheriting the CSS properties of the parent table?

(The following code snippet does not directly represent my situation but can serve as a helpful example for us to troubleshoot a solution.)

Thank you!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<table class="table table-bordered table-hover">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Nested 1a</td>
          <td>Nested 2a</td>
          <td>Nested 3a</td>
         <tr>
        <tr>
          <td>Nested 1b</td>
          <td>Nested 2b</td>
          <td>Nested 3b</td>
         <tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
 </table>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Essentially, the solution to this issue has already been provided here. According to the documentation...

"All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent."

Consequently, one must incorporate some overriding CSS to "reset" the inner table...

.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
  background-color:transparent;
  border:none;
}

Answer 2

Essentially, the solution to this issue has already been provided here. According to the documentation...

"All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent."

Consequently, one must incorporate some overriding CSS to "reset" the inner table...

.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
  background-color:transparent;
  border:none;
}

How can I create a nested table within a Bootstrap table without inheriting the parent "table" class?

Answer №1

Similar questions

`Generating an ever-changing masonry layout on a website using live data`

Ideas for utilizing jQuery to extract data from CSS files

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

How to keep Bootstrap 4 popover open when hovering over it

Click on an image to select four numbers using JavaScript

Utilize CSS to ensure footer fills remaining bottom space

When a radio button is clicked in Angular7 and it shares the same form control name, both radio buttons are being

Retrieve values from the same row using JQuery

Tips for storing HTML form data in a local JSON file without the need for PHP or Node.js dependencies

Unable to specifically identify or focus on this offspring

What steps can be taken to design a form containing only a field for selecting the YEAR?

jQuery's promise method in CSS is executed successfully

Retrieve the JavaScript blob's file name without including a hyperlink

Classes were successfully stored on the icon following the page's refresh

Show a clear box over an HTML table row upon mouseover, without highlighting the row

When you input text into a contenteditable div, it automatically gets placed inside a span element instead of being placed

How to set a canvas as the background of a div element

How can I make sure the footer stays at the bottom of the page on shorter pages in my

Bulma inquired, "What is the best way to position a button at the center of a

Keep one div attached to the edge of another div to ensure they remain conjoined when resizing