bootstrap table中的行tr标签设置display:block后行样式错乱问题

在table中，如果在tr加上display样式时，会发生错乱如下：

<tr style="display: block;" statusCode="2" itemName="fa" id="1"><td><a href="#">fa fa</a></td><td class="hidden-xs">Gold Level Virtual Server</td><td><span class="label label-success label-sm">已完成</span></td>
</tr>
<tr statusCode="1" itemName="ha" id="2"><td><a href="#">haha</a></td><td class="hidden-xs">Platinum Level Virtual Server</td><td><span class="label label-warning label-sm">正在执行</span></td>
</tr>
<tr statusCode="2" itemName="aha"><td><a href="#">aha</a></td><td class="hidden-xs">Hardware Switch</td><td><span class="label label-success label-sm">已完成</span></td>
</tr>

效果如图：

可以看到，第一行在设置display=block后，和正常行会不一致

解决这个问题的方式是，对行设置display=table-row来校准：

<tr style="display: table-row;" statusCode="2" itemName="fa" id="1"><td><a href="#">fa fa</a></td><td class="hidden-xs">Gold Level Virtual Server</td><td><span class="label label-success label-sm">已完成</span></td>
</tr>
<tr statusCode="1" itemName="ha" id="2"><td><a href="#">haha</a></td><td class="hidden-xs">Platinum Level Virtual Server</td><td><span class="label label-warning label-sm">正在执行</span></td>
</tr>
<tr statusCode="2" itemName="aha"><td><a href="#">aha</a></td><td class="hidden-xs">Hardware Switch</td><td><span class="label label-success label-sm">已完成</span></td>
</tr>

这样子就可以了

bootstrap table中的行tr标签设置display:block后行样式错乱问题相关推荐

img标签设置display:block，宽度无法100%
img标签设置display:block,宽度无法100% 一些个人总结,第一次发文章,有什么不足的地方,还请各位多提意见现象如下代码,img标签设置了display:block,尺寸宽度无法设定 ...
[html] 如何给table中的某一列设置固定宽度
[html] 如何给table中的某一列设置固定宽度 table{ table-layout:fixed} table tr td:nth-child(n){width:100px} 个人简介我是歌 ...
给tr标签设置外边距
给tr标签设置外边距 tr之间距离可以通过设置 tr 的外边距(margin)来实现,但是注意必须先把tr的显示属性设置为块体(block)元素: tr { display: block;/将tr设置 ...
【html】如何解决标签设置成超链接后字体格式及颜色变化的问题
问题描述: 如图所示,将一个标签设置成超链接后字体颜色和格式会发生改变,如果我只想让它保持原来的格式应该怎么办? 解决方法: 在a标签中添加一个属性: style="color:inheri ...
邮件发送html, 分别用p,code,xmp三个标签嵌入代码段后的样式比较
邮件发送html, 分别用p,code,xmp三个标签嵌入代码段后的样式比较代码测试代码效果展示代码块整体效果因为在工作中经常使用邮件来进行一些异常告警和通知, 所以会在邮件中直接附带日志, ...
html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
Bootstrap Table 中文文档（完整翻译版）
表格参数: 名称标签类型默认描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-classes String ...
bootstrap table中文文档
转载自:https://blog.csdn.net/rickiyeat/article/details/56483577 表格参数: 名称标签类型默认描述 - data-toggle Stri ...
bootstrap table 超链接的添加 a标签
后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 {title: '操作',align: 'center',formatt ...

bootstrap table中的行tr标签设置display:block后行样式错乱问题

bootstrap table中的行tr标签设置display:block后行样式错乱问题相关推荐

最新文章

热门文章