Why is browser changing my rowspan from "3" to "4" ??

tommelkonian
tommelkonian used Ask the Experts™
on
I've got a weird issue where a rowspan which I've set is being changed by the browsers.  I set rowspan="3" and browser renders rowspan="4" ( which I can see when I inspect the browser code).

I'm trying to achieve a 6x6 table , where the second row (under the heading row)  and 6th row are colspan="6" (full width), and the left cell of rows 3-5 is a single row with rowspan="3" , but for some reason the browser keeps bumping it up to "4" ( and causing the bottom row to not cover the full width)

This is running inside the DNN Action Form module html template.
 here's a nippet as an example.

Thanks,

Tom

<table class="table table-bordered" id="equipTable">
 <thead>
  <tr>
   <th>Item</th>
   <th>Product Image</th>
   <th>Manufacturer</th>
   <th>Name, Catalog or Model #</th>
   <th>Description &amp; Comments</th>
   <th>Vendor</th>
  </tr>
 </thead>
 <tbody id="chairs-tbody" style="max-width: 769px;">
  <tr class="ergo-headingtr">
   <th class="singlerow" colspan="6">Chairs</th>
  </tr>
  <tr>
   <td class="checkboxColumn" id="chairsColumn" rowspan="3" style="padding:0px!important; vertical-align:top; ">[Fields:Chairs]</td>
   <td><img alt="" class="ergo-img" src="/Portals/0/County/GSD/Ergo_Form/image018.png" /></td>
   <td>Office Master</td>
   <td>YS 84</td>
   <td>Medium Mesh back, multiple adjustments, armrests optional</td>
   <td>Palace Arts</td>
  </tr>
  <tr>
   <td class="bluemobilebg"><img alt="" class="ergo-img" src="/Portals/0/County/GSD/Ergo_Form/image004.png" /></td>
   <td>Steelcase</td>
   <td>&ldquo;Amia&rdquo;</td>
   <td>County standard office task chair; high back, seat depth adjustment</td>
   <td>PBI</td>
  </tr>
  <tr>
   <td><img alt="" class="ergo-img" src="/Portals/0/County/GSD/Ergo_Form/image008.png" /></td>
   <td>Steelcase</td>
   <td>&ldquo;Leap&rdquo;</td>
   <td>High back, multiple adjustments</td>
   <td>PBI</td>
  </tr>
  <tr>
   <td class="othertablecell" colspan="6"><span class="other"><strong>Other (specify):</strong></span>[Fields:OtherChairstext]</td>
  </tr>
 </tbody>
</table>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
That can't happen the browser will not do that.

I have put your code in a test file and confirmed it - so something else is going on - which we are not going to deduce from the code.

You will need to show us a link where it is happening.
I would hazard a very unsophisticated guess that you have a CSS sytle sheet that is playing with what get's to the browser..  I have been bit by this way before--  Review your  Hierarchy for Applying Styles to HTML .  

https://www.w3schools.com/css/css_specificity.asp

Author

Commented:
Thanks - You were both correct. I had some javascript running which was messing with the page (not sure the details,)  Removing that fixed the issue.


Thanks again!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial