表colspan和rowspan打破在FireFox但不是Chrome [英] Table colspan and rowspan breaking in FireFox but not Chrome
本文介绍了表colspan和rowspan打破在FireFox但不是Chrome的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前在Firefox中发生了一个有趣的UI错误。当页面在Chrome中呈现时，表格按预期工作。下面是一个带有引导cdn的示例HTML页面，如果你想在浏览器中看到这个问题。
I currently have an interesting UI bug happening in Firefox. When the page is rendered in Chrome the table works as expected. Below is a sample HTML page with a bootstrap cdn if you would like to see the problem in the browser.
在两个浏览器中运行它们，看看差异。
Run this in both browsers to see the 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不喜欢您的 rowspan = 0 属性。更改为 rowspan = 1 ，它会像Chrome一样显示。
Firefox doesn't like your rowspan=0 attribute. Change to rowspan=1 and it renders like Chrome.
示例：
https://jsfiddle.net/tyybbkah/
这篇关于表colspan和rowspan打破在FireFox但不是Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
