daninthemix daninthemix - 3 months ago 17
CSS Question

Aligning columns in nested tables

Am trying to figure out why these Bootstrap tables don't align. All three in the image below are within one parent table. These are the child tables:

<table class="table table-bordered table-condensed no-bottom-pad" style="width:100%;">


This is the parent:

<table class="table borderless table-condensed">


enter image description here

Fiddle here

Answer

You have some problems there.

When you build a table inside a table, that insider table works independent from the parent table, so that's why the columns don't align.

A solution here is to have one single <thead> that will control all the other <tr> and <td>.

Also when you want a <td> to have the width of multiple columns you add colspan="x" this case x = 3 because you have 3 columns. Example:

<tr class="text-danger">
    <td colspan="3">1 laptop was not added because there were no unique identifiers (hostname, asset tag or serial).</td>
</tr>

https://jsfiddle.net/0f561kef/3/

P.S. please ident your code correctly, that was a nightmare to understand where the tags start and close and its childs/parents :/

Comments