从表格单元格中删除边框答案

【问题标题】：Removing border from table cells从表格单元格中删除边框
【发布时间】：2022-01-29 02:25:16
【问题描述】：

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

我有一个 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>

【问题讨论】：

标签： html css xhtml html-table

【解决方案1】：

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

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

td {
    border: none;
}

如果不明确设置border-collapse，则无法保证跨浏览器移除表格单元格边框。

【讨论】：

仅供参考：如果您在table 上指定border-collapse: collapse，则无需在td 元素上指定border: none。它会照顾它。
感谢我的样式中缺少border-collapse 属性，现在可以使用了！

【解决方案2】：

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

【讨论】：

有 CSS 替代品吗？

【解决方案3】：

可能您只需要这条 CSS 规则：

table {
   border-spacing: 0px;
}

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

【讨论】：

【解决方案4】：

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

【讨论】：

请注意，type 属性不再需要。

【解决方案5】：

您可能想试试这个：http://jsfiddle.net/QPKVX/

不太确定您希望最终布局是什么样子——但这也解决了 colspan 问题。

【讨论】：

【解决方案6】：

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

.table1 {border=1px solid black;}

【讨论】：

【解决方案7】：

将表声明更改为：

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

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

【讨论】：

好的，谢谢，这给了我在桌子周围的边框，但是你怎么能在表格行周围设置边框？？
设置tr 也使用style="border...。或者，或者，在页面头部定义一个<style> 部分。

【解决方案8】：

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

你可以简单地使用这个 CSS 的 sn-p：

td {
   padding: 0;
}

【讨论】：

【解决方案9】：

正如@brezanac 提到的，您可以添加边框折叠，无需其他任何东西。我附上例子

.table {
    border: 1px solid #CCC; // only for example
    border-collapse: collapse;
}

th, td {
  border: 1px solid #CCC; // only for example
 }

<table aria-describedby="table without borders"
       class="table">
  <tr>
    <th id="id">id</th>
    <th id="name">name</th>
    <th id="price">price</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pizza</td>
    <td>7.99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Burger</td>
    <td>3.99</td>
  </tr>
</table>

<br/>

<table aria-describedby="table with borders">
  <tr>
    <th id="id">id</th>
    <th id="name">name</th>
    <th id="price">price</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pizza</td>
    <td>7.99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Burger</td>
    <td>3.99</td>
  </tr>
</table>

【讨论】：