首頁 > 文章 > web前端 > css中collapse是什麼意思

css中collapse是什麼意思

WBOY原創: 2021-12-22 15:31:118807瀏覽

css中collapse的意思是“合併邊框”，“border-collapse”屬性用於設定表格間的邊框是否被合併，當屬性的值為“collapse”時，表示邊框會被合併，語法為「元素{border-collapse:collapse;}」。

css中collapse是什麼意思

本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css中collapse是什麼意思

#CSS中的border-collapse屬性是用來設定表格邊框是否合併，它有三個值其中separate表示分離邊框，collapse表示合併邊框，inherit 表示從父級那繼承屬性

在製作表格的時候我們可以透過border-collapse 屬性來使兩個邊框合併為一個，使得邊框效果更加美觀。

border-collapse 屬性設定表格的邊框是否合併為單一的邊框，或是像在標準的 HTML 中分開顯示。

範例如下：

<html>
<head>
<style type="text/css">
table{
  border-collapse:collapse;
  }
table, td, th{
  border:1px solid black;
  }
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释：</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>

輸出結果：

css中collapse是什麼意思

#（學習影片分享：css影片教學）

以上是css中collapse是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css動畫中傾斜程式碼是什麼下一篇：css動畫中傾斜程式碼是什麼

看更多