HTML table borders not showing

March 16, 2022

I want to include HTML table on my project. The problem is that I created a table and it seems to have very little styling, including no borders at all. I commented out my CSS code, JS code and most parts of HTML code and tried it out in multiple situations but still nothing. I also tried it in 3 different browsers (Brave, Chrome, Edge). What am I missing? I don’t use Bootstrap or whatever so styling is not compromised by 3rd party library.

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

>Solution :

Initial a table has no styles. You have to style it on your own.

Here is minimalistic working example:

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>

And here are some informations about styling a table