从表格单元格中删除边框

Question

我知道这是一个愚蠢的问题，但我似乎完全忘记了如何去做。

我有一个HTML table，我想删除所有单元格周围的所有边框，以便整个表格周围只有一个边框。

我的代码如下：

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>

Answer 1

只需折叠表格边框并从表格单元格（td元素）中删除边框。

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

无法明确设置border-collapse跨浏览器删除表格单元格边框无法保证。

Answer 2

用于此目的的HTML属性为rules=none（要插入table标记）。

Answer 3

<style type="text/css">
table {
  border:1px solid black;
}
</style>

Answer 4

只需在带有类（例如.table1）的div中使用您的表格，并且不要在CSS中为此表格设置任何边框。然后为该类使用CSS代码。

.table1 {border=1px solid black;}

Answer 5

将您的表格声明更改为：

<table style="border: 1px dashed; width: 500px;">

以下是实际操作的示例：http://jsfiddle.net/kc48k/

Answer 6

您可能想尝试这样做：http://jsfiddle.net/QPKVX/

不确定您希望最终布局看起来像什么 - 但这也解决了colspan问题。

Answer 7

可能你只需要这个CSS规则：

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

Answer 8

如果此页面上的所有解决方案均无效，并且您遇到以下问题：

你可以简单地使用这段CSS：

td {
   padding: 0;
}