Question

为什么当桌子的容器有一定的宽度并且桌子居中时，<td>上的顶部/底部边框突出1px？

图片显示了问题：

HTML：

<body>
  <table>
    <tr>
      <td style=" border-top:4px solid green;border-right:4px solid green;">data 1
      <td>data 2            
  </table>
</body>

CSS：

table{
  margin:10px auto;
  border-collapse:collapse;
  text-align:center;
  line-height:30px;
}
td{    
  background-color:silver;
  width:100px;
}

Answer 1

您尚未关闭<td>和<tr>：

  <td style=" border-top:4px solid green;border-right:4px solid green;">data 1
  <td>data 2</td>
</tr>

另外，添加以下CSS：

使边界均匀。
使用border-box布局。

CSS：

* {box-sizing: border-box;}

td {
  background-color: silver;
  width: 100px;
  border: 4px solid silver;
}

注意： 您可能需要修改一下才能获得正确的输出。我们可以向您提供正确方向的建议。

预览

小提琴：https://jsfiddle.net/2vdf28xd/

Answer 2

这是因为默认情况下宽度和高度是由浏览器用

计算的

width = width + border left + border right + padding left + padding right

height = height + border top + border bottom + padding top + padding bottom

为避免这种情况，请确保计算是绝对的

 td {
      box-sizing: border-box;
 }

祝你好运！

Answer 3

我发现这是旧版Firefox中的BUG。

在新的FF版本和其他浏览器中不会发生此行为。

Answer 4

您可以为可能使用的表添加以下属性：

<table border="1">...</table>

添加border =“ 1”属性，我们可以消除此1px突出问题。

表格单元格上的边框 - 为什么它会突出1px？

4 个答案: