如何移除 HTML 表格的邊框

若要移除 HTML 表格中可見的邊框，請對顯示線條的表格及儲存格設定 CSS border 屬性為 none。若希望相鄰儲存格的邊框合併成一條線，則使用 border-collapse: collapse；這個屬性會合併邊框，而不是移除邊框。當你在儲存格中排列圖片或其他內容時，這項差異尤其實用：collapse 會改變相鄰邊框交會的方式，border: none 則會移除所選元素實際呈現的邊框。

使用 border-collapse: collapse 合併 HTML 表格中相鄰儲存格的邊框

CSS 的 border-collapse 屬性可控制表格使用分離或合併的邊框模型。設為 collapse 時，相鄰儲存格的邊框會合併，因此兩個儲存格的共用邊緣不會各自繪製一條線。表格外圍及儲存格周圍原有的邊框仍可能顯示；這項宣告不會將它們移除，也不能用來把間距設為零。在分離模型中，儲存格邊框之間的空隙由 border-spacing 控制；合併模型則會合併相鄰邊框，因此在該模型中，調整 border-spacing 並不能解決可見線條的問題。

以下簡短的 HTML 範例包含兩個帶有邊框的儲存格。表格規則會合併兩個儲存格交界處的線條，而儲存格規則則會保留可見線條：

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

你可以將範例儲存格中的文字換成自己的內容；若儲存格用來放圖片，也可以加入圖片元素。這段 CSS 適用於一般的 <td> 和 <th> 儲存格，不依賴任何圖片服務。padding 宣告會在各儲存格內側增加留白，不會控制彼此分離的儲存格邊框之間的空隙。若要建立共用線條的表格格線，請保留儲存格邊框並使用 collapse。若不想顯示線條，請依下文移除適用的邊框宣告。

將 CSS border 屬性設為 none 以移除 HTML 表格的邊框

若要隱藏邊框，請對表格及所有需要隱藏邊框的儲存格類型設定 border: none。使用 table, th, td 的規則會同時指定表格、表頭儲存格及資料儲存格。如果表格外框已不存在，只有儲存格線條還在，則可用 th, td 只指定這些儲存格。選擇器會決定哪些元素套用這項宣告；CSS 級聯則會決定多個相符宣告中哪一個生效。更具體的規則可能會覆蓋一般選擇器；若特異性相同，後出現的宣告會生效。

border 屬性是 border-width、border-style 和 border-color 的簡寫。將它設為 none 會移除所選元素實際呈現的邊框，但不會移除儲存格留白或內容。例如，若表格、表頭儲存格與資料儲存格都不應顯示邊框，樣式表可以使用 table, th, td { border: none; }。只有在也希望表格採用合併邊框模型時，才另外加入 border-collapse: collapse；它不能取代 border: none。

若線條仍然存在，請確認是哪個元素繪製了它。表格上的邊框需要套用到表格的規則；表頭或資料儲存格上的邊框，則需要套用到 th 或 td 的規則。接著檢查是否有其他樣式表規則覆蓋了你的宣告。如此一來，修正只會套用到實際帶有邊框的元素，也不會改變無關的表格間距或內容。