首頁 > web前端 > css教學 > css中collapse是什麼意思

css中collapse是什麼意思

WBOY
發布: 2021-12-22 15:31:11
原創
8865 人瀏覽過

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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板