我想在我的專案中包含 HTML 表格。問題是我創建了一個表格，它的樣式似乎很少，包括根本沒有邊框。我注釋掉了我的 CSS 代碼、JS 代碼和大部分 HTML 代碼，并在多種情況下嘗試了它，但仍然沒有。我還在 3 種不同的瀏覽器（Brave、Chrome、Edge）中進行了嘗試。我錯過了什么？我不使用 Bootstrap 或其他任何樣式，因此樣式不會受到 3rd 方庫的影響。
<div class="wrapper">
<div class="input-container" id="income-input-container">
<h4>Add income</h4>
<input type="text" placeholder="Name" id="income-name">
<input type="text" placeholder="Amount" id="income-amount">
<input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="income-date">
<select id="income-category">
<option value="Not categorized">Not categorized</option>
<option value="Job">Job</option>
<option value="Business">Business</option>
<option value="Investments">Investments</option>
</select>
<button class="submit-button">Submit</button>
</div>
<div class="input-container" id="expense-input-container">
<h4>Add expense</h4>
<input type="text" placeholder="Name" id="expense-name">
<input type="text" placeholder="Amount" id="expense-amount">
<input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="expense-date">
<select id="expense-category">
<option value="Not categorized">Not categorized</option>
<option value="Clothing">Clothing</option>
<option value="Medical">Medical</option>
<option value="Hobbies">Hobbies</option>
<option value="Travel">Travel</option>
<option value="Bills">Bills</option>
</select>
<button class="submit-button">Submit</button>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Amount</th>
<th>Date</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>This name</td>
<td>This type</td>
<td>200$</td>
<td>2021-03-04</td>
<td>Travel</td>
</tr>
</tbody>
</table>
</div>uj5u.com熱心網友回復：
初始表格沒有樣式。你必須自己設計它。
這是簡約的作業示例：
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Amount</th>
<th>Date</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>This name</td>
<td>This type</td>
<td>200$</td>
<td>2021-03-04</td>
<td>Travel</td>
</tr>
</tbody>
</table>這里有一些關于表格樣式的資訊
uj5u.com熱心網友回復：
將此添加到您的 CSS :
border-style: solid;。這將在表格周圍創建一條黑線作為邊框。
https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_border-style&preval=solid
uj5u.com熱心網友回復：
這是簡單的 CSS 規則的一種可能性，它會做一些樣式：
border-collapse: collapse防止雙邊框，padding對于單元格是可選的（在單元格內容和邊框之間創建一些空間），margin對于table創建一些頂部/底部距離的 for 也是如此。-border設定可以根據需要改變（樣式、厚度、顏色）
table {
border-collapse: collapse;
margin: 1em 0;
}
th,
td {
border: 1px solid #ccc;
padding: 3px 6px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="input-container" id="income-input-container">
<h4>Add income</h4>
<input type="text" placeholder="Name" id="income-name">
<input type="text" placeholder="Amount" id="income-amount">
<input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="income-date">
<select id="income-category">
<option value="Not categorized">Not categorized</option>
<option value="Job">Job</option>
<option value="Business">Business</option>
<option value="Investments">Investments</option>
</select>
<button class="submit-button">Submit</button>
</div>
<div class="input-container" id="expense-input-container">
<h4>Add expense</h4>
<input type="text" placeholder="Name" id="expense-name">
<input type="text" placeholder="Amount" id="expense-amount">
<input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="expense-date">
<select id="expense-category">
<option value="Not categorized">Not categorized</option>
<option value="Clothing">Clothing</option>
<option value="Medical">Medical</option>
<option value="Hobbies">Hobbies</option>
<option value="Travel">Travel</option>
<option value="Bills">Bills</option>
</select>
<button class="submit-button">Submit</button>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Amount</th>
<th>Date</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>This name</td>
<td>This type</td>
<td>200$</td>
<td>2021-03-04</td>
<td>Travel</td>
</tr>
</tbody>
</table>
</div>
<script src="js/main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
檢查：https ://www.w3schools.com/html/html_table_borders.asp
首先，在你的 html 中，你可以給你的 table 元素賦予一個等于“1”的“border”屬性，如下所示：
<table border=1>
現在你將有邊界但“雙邊界”。如果您查看 w3schools 的鏈接，您可以看到一些可以撰寫的 CSS 樣式來更改邊框的外觀。例如：
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444988.html