CSS表格默认填充或边距

Question

今天我第一次尝试使用表格，并发现table、tr和td标签之间有一点间距，大约1像素左右。

所以这是我的问题：

这是我的代码：

<table id="upload_box_container">
    <tr>
        <td class="border_bottom_1px">hi1</td>
        <td class="border_bottom_1px">hi2</td>
    </tr>
</table>

(upload_box_container - 这只是背景色和边框颜色)

(border_bottom_1px - 它的名称表示仅提供带有 1 像素大小的底部边框)

这是一个显示它的图片: http://postimage.org/image/16wz2ao78/

我的问题是

• 为什么两个底部边框之间有空隙？

• 为什么表格两侧有内边距（如填充），而边框没有接触表格边框？

谢谢。

- homerun

---

图片链接已经失效，导致问题不够清晰。 - Brian Tompsett - 汤莱恩

Answer 1

定义

table { border-spacing:0; }

并且它应该以你想要的方式呈现。

- c-smile

Answer 2

你需要重置浏览器应用的默认样式。

在你的CSS文件顶部尝试以下代码：

table, table tr, table td { padding:none;border:none;border-spacing:0;}

请查看一些受欢迎的CSS重置：

http://meyerweb.com/eric/tools/css/reset/ http://developer.yahoo.com/yui/reset/

这些链接提供了常用的CSS重置，可用于重置网页在不同浏览器上的默认样式。

- Calvin Froedge

Answer 3

我更喜欢使用这种方法：

table { table-layout:fixed; border-collapse:collapse; }

- Barry Kaye