[英]Table border appears in chrome but not firefox or IE
I'm using Bootstrap v3.0.0 to make a dropdown on a table header. 我正在使用Bootstrap v3.0.0对表头进行下拉。 I used chrome to view as I was designing, and everything looked fine. 我在设计时使用chrome进行查看,一切看起来都很好。 Now, when I check the page in Firefox or IE, the border of my cell is missing. 现在,当我在Firefox或IE中检查页面时,单元格的边框丢失了。
Here is the html for my dropdown. 这是我的下拉菜单的html。
<th class="dropdown">
<button class="btn-th dropdown-toggle" type="button" data-toggle="dropdown" style="min-width:82px;">
Colour
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="filterRows('', 0); return false;">Show All</a></li>
<li><a href="#" onclick="filterRows('colour','Red'); return false;">Red</a></li>
<li><a href="#" onclick="filterRows('colour','Blue'); return false;">Blue</a></li>
<li><a href="#" onclick="filterRows('colour','Green'); return false;">Green</a></li>
<li><a href="#" onclick="filterRows('colour','Yellow'); return false;">Yellow</a></li>
<li><a href="#" onclick="filterRows('colour','Brown'); return false;">Brown</a></li>
</ul>
</th>
The css for the class btn-th 类btn-th的CSS
.btn-th {
font-weight: bold;
padding: 0 !important;
cursor: pointer;
border-radius: 0;
border-width: 0px;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border-color: transparent;
background-color: transparent;
}
What it looks like in chrome: chrome中的外观:
What it looks like in Firefox: Firefox中的外观:
And what Firefox shows when I right click and inspect element and choose computed. 当我右键单击并检查元素并选择计算时,Firefox显示的内容。 As you can see - Firefox says it should have a bottom border! 如您所见-Firefox说它应该有一个底部边框!
In IE, neither the top nor the bottom border is present: 在IE中,既不显示顶部边框也不显示底部边框:
The cells either side are a standard with no bells or whistles, and they are showing all borders on all browsers. 两侧的单元格都是标准的,没有钟声或口哨声,并且在所有浏览器上都显示所有边框。
What am I missing here - where have my borders gone? 我在这里想念的是什么-我的边界在哪里?
I had the same problem with missing table border. 我也遇到缺少表格边框的问题。 My solution is: 我的解决方案是:
table{
border-collapse: collapse !important;
border-spacing: 0px;
border: 1px solid #DDD;
}
And border for table rows: 表格行的边框:
table tr{
border-bottom: 1px solid #DDD !important;
}
I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered" 我在布局中使用的是Bootstrap,并且该表还具有引导CSS类,例如“ table table-striped table-bordered”
This solution works for me, when I tried solution with 当我尝试使用以下解决方案时,此解决方案对我有用
border-collapse: separate !important;
it didn't work properly for me. 它对我来说无法正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.