去除表格边框之间的空白。

Question

我在表格中的边框之间有一些空隙。

我无法弄清楚原因，一直尝试使用负边距使它们重叠在一起，但是边距不起作用。

由于这是一个表格，所以td和th都有左边框。

但是，侧边框和上/下边框之间也有空隙。

这里是我创建的示例。

一些表格CSS。

.profile-table {
  height: 100%;
}

.profile-table td { 
  text-align:   center;
  border-right: 1px solid #ccc;
  font-size:    1.2em;
}

.profile-table th { 
  text-align:   center;
  border-right: 1px solid #ccc;
  width:        100px;
}

.profile-table tr{ 
}

.profile-table *:last-child{
  border: none;
}

- Dymond

---

为什么不使用像这样的CSS重置http://meyerweb.com/eric/tools/css/reset/？我总是在我的页面中使用它，所以我不会遇到填充、图像边框和其他一些浏览器（特别是IE）会出现的奇怪问题。 - Guilherme de Jesus Santos

Answer 1

使用border-collapse:collapse来合并边框。

请查看此范例。

- Manish Mishra

---

谢谢。实际上之前从未听说过 border:collapse！再次感谢。 - Dymond

Answer 2

使用这个

<table class="profile-table" cellpadding="0" cellspacing="0">
</table>

Demo Here

http://jsfiddle.net/pHVhg/3/

- Dhaval Marthak

---

cellpadding和cellspacing已经被弃用（自1999年起） - Mark Schultheiss

Answer 3

在你的表格中加入border-collapse: collapse;（参见MDN参考文档）

JsFiddle: http://jsfiddle.net/sWC9t/

- Fabrizio Calderan