How do i remove white spaces between borders in table-CodePudding

I've seen this answered in other questions but it doesn't work for me. i'm also only 1 month in so im very new to this.

i want to remove the space between each cell so there is a collapsed border around the td and th.

border-collapse:collapse

doesn't seen to work.
here is my code:

index.css

@import url('https://fonts.googleapis.com/css2?family=League Gothic&family=Lobster Two:wght@400;700&family=Roboto:wght@300&display=swap');


h1 {
  font-family: 'Lobster Two';
  font-weight: 600;
  font-size: 4rem;
}

.leaderboard-header {
  text-align: center;
  padding-bottom: 80px;
}

.table {
  table-layout: auto;
  margin-left: auto;
  margin-right: auto;
  width: max-content; 
  border-spacing: 0;
  text-align: center;
}

.table th, td {
  text-align: center;
  font-family: 'Roboto';
  border-collapse: collapse;
  border: solid 1px;
  padding-left: 5px;
  padding-right: 5px;
}

App.js

import * as React from "react";


function App() {
  return (
    <div className="leaderboards">
      <div className="leaderboard-header">
        <h1>Leaderboards</h1>
      </div>
      <div className="table">
        <table>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Breed</th>
            <th>Dog Size</th>
            <th>Neutered</th>
          </tr>
          <tr>
            <td>Oscar</td>
            <td>2</td>
            <td>Boxer</td>
            <td>Medium</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Lilly</td>
            <td>4</td>
            <td>French Bulldog</td>
            <td>Small</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Blue</td>
            <td>5</td>
            <td>Cocker Spaniel</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Spike</td>
            <td>3</td>
            <td>Staffy</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Bella</td>
            <td>9</td>
            <td>American Bulldog</td>
            <td>Large</td>
            <td>Yes</td>
          </tr>
        </table>
        </div>
    </div>
  );
}


export default App;

index.js

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

CodeSandbox: https://codesandbox.io/embed/loving-noyce-3gwvfh?fontsize=14&hidenavigation=1&theme=dark

CodePudding user response：

The space between table cells can be removed easily using cellspacing and cellpadding. Give cellspacing and cellpadding as 0 in table eg: <table cellspacing="0" cellpadding="0">

Try the below code. This may help you.

h1 {
  font-family: 'Lobster Two';
  font-weight: 600;
  font-size: 4rem;
}

.leaderboard-header {
  text-align: center;
  padding-bottom: 80px;
}

.table {
  table-layout: auto;
  margin-left: auto;
  margin-right: auto;
  width: max-content; 
  border-spacing: 0;
  text-align: center;
}

.table th, td {
  text-align: center;
  font-family: 'Roboto';
  border-collapse: collapse;
  border: solid 1px;
  padding-left: 5px;
  padding-right: 5px;
}
   

 table
{
    border-collapse: collapse;
}

 <div className="leaderboards">
      <div className="leaderboard-header">
        <h1>Leaderboards</h1>
      </div>
      <div className="table">
        <table align="center" cellspacing="0" cellpadding="0">
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Breed</th>
            <th>Dog Size</th>
            <th>Neutered</th>
          </tr>
          <tr>
            <td>Oscar</td>
            <td>2</td>
            <td>Boxer</td>
            <td>Medium</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Lilly</td>
            <td>4</td>
            <td>French Bulldog</td>
            <td>Small</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Blue</td>
            <td>5</td>
            <td>Cocker Spaniel</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Spike</td>
            <td>3</td>
            <td>Staffy</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Bella</td>
            <td>9</td>
            <td>American Bulldog</td>
            <td>Large</td>
            <td>Yes</td>
          </tr>
        </table>
        </div>
    </div>

CodePudding user response：

In the css sheet make the borders have fixed locations and be slightly larger width and height wise

CodePudding user response：

hello i think that will solve your problem try this

<table cellspacing="0">