When attempting to add a class to a parent DIV that affects multiple inner elements, issues with styling arise when using Bootstrap.
The problem is demonstrated in the code snippet below, where the bottom border appears misaligned on element 2. Simply toggling ".second" on the element instead seems to resolve the issue.
.second {
display: none;
}
.show-inner .second {
display: block;
}
<div id="outer">
<table class="table">
<thead>
<tr>
<th class="first">A</th>
<th class="second">B</th>
<th class="third">C</th>
</tr>
</thead>
<tbody>
<tr>
<td width="98%" class="first">1</td>
<td width="1%" class="second">2</td>
<td width="1%" class="third">3</td>
</tr>
</tbody>
</table>
</div>
<button onclick="$('#outer').toggleClass('show-inner');">Toggle .second</button>
In my project, implementing dependencies of the outer DIV class is crucial. Resolving this issue would significantly reduce the amount of code required.