資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學在 CSS 中，哪個表格屬性指定表格單元格之間應該顯示的寬度？
在 HTML 中，表格包含列和行。預設情況下，表格單元格之間不包含空格。如果我們在表格單元格之間新增一些空格，可以改善表格的 UI。
在 CSS 中，'border-spacing' 屬性新增表格單元格之間的空格。此外，在使用 'border-spacing' CSS 屬性時，我們需要將 'border-collapse' CSS 屬性與 'separate' 值一起使用。
語法
使用者可以按照以下語法使用 'border-spacing' CSS 屬性來在表格單元格之間新增空格。
table {
border-collapse: separate;
border-spacing: 3rem;
}
在上面的語法中，我們對錶格元素使用了 'border-collapse' 和 'border-spacing' CSS 屬性。
示例
在下面的示例中，表格包含各個國家的資料，它有三列，包含國家名稱、首都和人口。
我們使用了 'border-spacing' CSS 屬性在兩行和兩列之間新增 3rem 的空格。在輸出中，使用者可以觀察到表格單元格之間的間距。
<html>
<head>
<style>
th, td {
border: 1px solid blue;
padding: 5px;
text-align: left;
}
table {
border-collapse: separate;
border: 3px dotted green;
border-spacing: 3rem;
}
</style>
</head>
<body>
<h3> Using the border-spacing CSS property to add spaces between table cells </h3>
<table>
<tr>
<th> Country </th>
<th> Capital </th>
<th> Population </th>
</tr>
<tr>
<td> India </td>
<td> New Delhi </td>
<td> 1.3 billion </td>
</tr>
<tr>
<td> China </td>
<td> Beijing </td>
<td> 1.4 billion </td>
</tr>
<tr>
<td> United States </td>
<td> Washington, D.C. </td>
<td> 325 million </td>
</tr>
<tr>
<td> Indonesia </td>
<td> Jakarta </td>
<td> 250 million </td>
</tr>
</table>
</body>
</html>
示例
在下面的示例中，我們建立了包含人員名、姓和年齡的表格。此外，我們建立了輸入框以從使用者處獲取數字輸入。
我們在 JavaScript 中訪問了數字輸入並添加了 'input' 事件。因此，每當使用者更改數字輸入的值時，它都會更改 'border-spacing' CSS 屬性的值，並根據該值增加或減少間距值。
<html>
<head>
<style>
th, td {
border: 1px solid blue;
padding: 5px;
text-align: left;
}
table {
border-collapse: separate;
border: 3px dotted green;
}
</style>
</head>
<body>
<h3> Using the <i> border-spacing </i> CSS property to add spaces between table cells </h3>
<p> Enter a value in px to set space between table cells </p>
<input type="number" id="space">
<br> <br>
<table id = "nameTable">
<tr>
<th> Firstname </th>
<th> Lastname </th>
<th> Age </th>
</tr>
<tr>
<td> Jill </td>
<td> Smith </td>
<td> 50 </td>
</tr>
<tr>
<td> Eve </td>
<td> Jackson </td>
<td> 94 </td>
</tr>
<tr>
<td> John </td>
<td> Doe </td>
<td> 80 </td>
</tr>
</table>
<script>
var table = document.getElementById("nameTable");
let space = document.getElementById("space");
space.addEventListener('input', function () {
table.style.borderSpacing = space.value + "px";
});
</script>
</body>
</html>
結論
使用者學習瞭如何使用 'border-spacing' CSS 屬性來在表格單元格之間新增空格。此外，使用者始終需要將 'border-collapse' 設定為 'separate' 以在單元格之間新增間距。
更新於：2023年4月19日
433 次瀏覽
廣告