html - Table colspan and rowspan breaking in FireFox but not Chrome -
i have interesting ui bug happening in firefox. when page rendered in chrome table works expected. below sample html page bootstrap cdn if see problem in browser.
run in both browsers see difference.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div style="margin-top: 10px;"> <table class="table table-bordered"> <thead> <tr> <th colspan="1" rowspan="2">ethbp</th> <th colspan="1" rowspan="2">duo-iujo</th> <th colspan="2" rowspan="0">chue</th> <th colspan="5" rowspan="0">aeueua aeuaeu</th> <th colspan="4" rowspan="0">aoeua aeuae</th> <th colspan="9" rowspan="0">aeuaeuaeuaeua</th> </tr> <tr> <th colspan="1" rowspan="1">aoeu aeua</th> <th colspan="1" rowspan="1">aeu aeua</th> <th colspan="1" rowspan="1">aeuaeuaeu</th> <th colspan="1" rowspan="1">aeu aeu aeuaeu</th> <th colspan="1" rowspan="1">aeu aeu</th> <th colspan="1" rowspan="1">aeuaeuae</th> <th colspan="1" rowspan="1">near aeu</th> <th colspan="1" rowspan="1">eui</th> <th colspan="1" rowspan="1">uei</th> <th colspan="1" rowspan="1">euer</th> <th colspan="1" rowspan="1">aoeu</th> <th colspan="1" rowspan="1">eua</th> <th colspan="1" rowspan="1">loe</th> <th colspan="1" rowspan="1">oeu</th> <th colspan="1" rowspan="1">uou</th> <th colspan="1" rowspan="1">sec events</th> <th colspan="1" rowspan="1">evn aoeuaeo</th> <th colspan="1" rowspan="1">euoe auae</th> <th colspan="1" rowspan="1">euue oeueuo</th> <th colspan="1" rowspan="1">othre aeuae aeuaeu</th> </tr> </thead> </table> </div> </body> </html>
firefox doesn't rowspan=0
attribute. change rowspan=1
, renders chrome.
example: https://jsfiddle.net/tyybbkah/
Comments
Post a Comment