css - 表格边框渗入 Chrome 中的相邻单元格
问题描述
我在 Chrome 中遇到了一个奇怪的问题,边框渗入相邻的单元格。
这就是我希望它的外观以及它在 Firefox 中的显示方式
这就是它在 Chrome 中的显示方式
是什么导致这个边界渗入另一个单元格?
.myTable{
border:0;
padding:0;
border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
width:280pt;
}
.leftTopRight{
border-width:0.5pt 0.5pt 0 0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.leftRight{
border-width:0 0.5pt 0 0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.allAround{
border-width:0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.leftRightBottom{
border-width:0 0.5pt 0.5pt 0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
td {
color:black;
font-size:11pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
vertical-align:bottom;
white-space:nowrap;
}
<table class="myTable">
<tr class="singleHeight">
<td colspan=6 class="leftTopRight">Number</td>
</tr>
<tr class="singleHeight">
<td colspan=6 class="leftRight"> </td>
</tr>
<tr class="singleHeight">
<td colspan=1 class="allAround">z</td>
<td colspan=5 class="leftRightBottom">1018</td>
</tr>
</table>
解决方案
删除border-collapse:collapse
, 和左边框.leftRightBottom
(这样您就不会在这两个单元格相遇的地方获得双宽边框。)
.myTable{
border:0;
padding:0;
border-spacing:0;
/*border-collapse:collapse;*/
table-layout:fixed;
width:280pt;
}
.leftTopRight{
border-width:0.5pt 0.5pt 0 0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.leftRight{
border-width:0 0.5pt 0 0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.allAround{
border-width:0.5pt;
border-color: black;
border-style: solid;
text-align:center;
}
.leftRightBottom{
border-width:0 0.5pt 0.5pt 0;
border-color: black;
border-style: solid;
text-align:center;
}
td {
color:black;
font-size:11pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
vertical-align:bottom;
white-space:nowrap;
}
<table class="myTable">
<tr class="singleHeight">
<td colspan=6 class="leftTopRight">Number</td>
</tr>
<tr class="singleHeight">
<td colspan=6 class="leftRight"> </td>
</tr>
<tr class="singleHeight">
<td colspan=1 class="allAround">z</td>
<td colspan=5 class="leftRightBottom">1018</td>
</tr>
</table>
推荐阅读
- modeling - 在空间中离散 PDE 以与 modelica 一起使用
- c# - Unity 的 MonoBehaviour 类中的“消息”是什么?(开始,更新,唤醒...等)
- netsuite - NetSuite Script 2.0 如何在报价单上禁用行项目上的金额字段
- sed - 使用 sed 合并行
- android - 将图像从半屏滚动到全屏,将内容向下移动
- node.js - 使用 Promise 在 Node.js 中调用异步递归函数
- javascript - 使用 vuejs 从输入中动态添加项目
- python - 用于从维基百科中的 ParserFunctions 生成值的 Python 工具/库
- ios - 导航栏透明swift 5
- data-structures - 有效找出哪些 3D 线与哪些 3D 点相交