HTML table 边框未显示

Question

我想在我的项目中包含 HTML table。问题是我创建了一个 table 并且它的样式似乎很少，包括根本没有边框。我注释掉了我的 CSS 代码、JS 代码和大部分 HTML 代码，并在多种情况下进行了尝试，但仍然没有。我还在 3 种不同的浏览器（Brave、Chrome、Edge）中进行了尝试。我错过了什么？我不使用 Bootstrap 或其他任何样式，因此第三方库不会影响样式。

<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>

Answer 1

将此添加到您的 CSS 中： border-style: solid;。这将在 table.

周围创建一条黑线作为边框

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_border-style&preval=solid

Answer 2

首字母table没有样式。您必须自己设计样式。

这是一个极简的工作示例：

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>

这里有一些关于 styling a table

的信息

Answer 3

这里有一个简单的 CSS 规则，可以做一些样式设置：

border-collapse: collapse 防止双边框，单元格的 padding 是可选的（在单元格内容和边框之间创建一些 space），margin 也是如此table 这会产生一些 top/bottom 距离。 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>

Answer 4

检查：https://www.w3schools.com/html/html_table_borders.asp

首先，在您的 html 中，您可以像这样为 table 元素赋予等于“1”的“border”属性：

<table border=1>

现在您将拥有边框，但“双边框”。如果您查看 w3schools 中的 link，您会看到一些 css 样式，您可以编写这些样式来更改边框的外观。例如：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML table 边框未显示

HTML table borders not showing

html

css

html-table