Why both tables of different component JS file with different CSS files importing are giving same style?

ExpenseEntryList.js:

import React from 'react';
import './ExpenseEntryItemList.css';
import FormattedDate from './FormattedDate';
import FormattedMoney from './FormattedMoney';

const ExpenseEntryItemList = ({ items }) => {
  const lists = items.map((item) => (
    <tr key={item.id}>
      <td>{item.name}</td>
      <td>
        <FormattedMoney value={item.amount} />
      </td>
      <td>
        <FormattedDate value={item.spenddate} />
      </td>
      <td>{item.category}</td>
    </tr>
  ));

  return (
    <table>
      <thead>
        <tr>
          <th>Item</th>
          <th>Amount</th>
          <th>Date</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>{lists}</tbody>
    </table>
  );
};

export default ExpenseEntryItemList;

ExpenseEntryItemList.css:

table {
  border-collapse: collapse;
  border: 2px solid violet;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid pink;
  padding: 10px 20px;
}

th {
  background-color: aqua;
}

tr:nth-child(even) td {
  background-color: yellow;
}

tr:nth-child(odd) td {
  background-color: orange;
}

caption {
  padding: 10px;
}

MovieBooking.js:

import React from 'react';
import FormattedDate from './FormattedDate';
import FormattedMoney from './FormattedMoney';
import './MovieBooking.css';
const MovieBooking = ({ items }) => {
  const lists = items.map((item) => (
    <tr key={item.id}>
      <td>{item.name}</td>
      <td>
        <FormattedMoney value={item.amount} />
      </td>
      <td>
        <FormattedDate value={item.spenddate} />
      </td>
      <td>{item.language}</td>
    </tr>
  ));

  return (
    <table>
      <thead>
        <tr>
          <th>Movie</th>
          <th>Amount</th>
          <th>Date</th>
          <th>Language</th>
        </tr>
      </thead>
      <tbody>{lists}</tbody>
    </table>
  );
};

export default MovieBooking;

MovieBooking.css:

table {
  border-collapse: collapse;
  border: 2px solid blue;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid brown;
  padding: 10px 20px;
}

th {
  background-color: greenyellow;
}

 tr:nth-child(even) td {
  background-color: aqua;
}

 tr:nth-child(odd) td {
  background-color: orange;
}

caption {
  padding: 10px;
}

FormattedDate.js:

import React from 'react';

const FormattedDate = ({ value }) => {
  const format = (value) => {
    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const parsedDate = new Date(Date.parse(value));
    const formattedDate = `${parsedDate.getDate()}-${months[parsedDate.getMonth()]}-${parsedDate.getFullYear()}`;
    return formattedDate;
  };

  return <span>{format(value)}</span>;
};

export default FormattedDate;

FormattedMoney.js:

import React from 'react';

const FormattedMoney = ({ value }) => {
  const format = (amount) => {
    return parseFloat(amount).toFixed(2);
  };

  return <span>{format(value)}</span>;
};

export default FormattedMoney;

App.js:

import React from 'react';
import './App.css';
import MovieBooking from './components/MovieBooking';
import ExpenseEntryItemList from './components/ExpenseEntryItemList';
function App() {
  const items = [
    {
      id: 1,
      name: "Mango Juice",
      amount: 100,
      spenddate: "2020-10-10",
      category: "Food",
    },
    {
      id: 2,
      name: "Assam Tea",
      amount: 1000,
      spenddate: "2020-10-11",
      category: 'Food',
    },
    {
      id: 3,
      name: "Petrol",
      amount: 3000,
      spenddate: "2020-10-14",
      category: 'Travel',
    },
    {
      id: 4,
      name: "Bulb",
      amount: 140,
      spenddate: "2020-10-16",
      category: 'Electronic',
    }
  ];

  const movies=[
    {
      id: 1,
      name: "Top Gun: Maverik",
      amount: 300.00,
      spenddate: "2022-06-21",
      language: "English",
    },
    {
      id: 2,
      name: "Drishyam 2",
      amount: 250,
      spenddate: "2022-12-27",
      language: 'Hindi',
    },
    {
      id: 3,
      name: "Pushpa",
      amount: 250,
      spenddate: "2021-12-14",
      language: 'Telegu',
    },
    {
      id: 4,
      name: "The Balkan Line",
      amount: 140,
      spenddate: "2019-10-16",
      language: 'Russian',
    }
  ];

  return (
    <div>
      <div id='Expenses'>
        <h1 >Expense Items:</h1>
        <ExpenseEntryItemList items={items} />
      </div>
      <div id='Movies'>
        <h1>Movies: </h1>
        <MovieBooking items={movies}/>
      </div>
    </div>
  );
}
export default App;

App.css:

#Expenses h1 {
  color: red;
}

#Movies h1 {
  color: blue;
}

All files except App.js and App.css are in components folder. App.js and App.css are in src folder.

In the above code, I tried to import the "ExpenseEntryItemList.js" and "MovieBooking.js" file into App.js and tried to show them on a single webpage. Both of them showed the data in the form of a table.

I wanted to keep the styles of the table different. So, I made 2 CSS files one for each JS file component, and imported them to the respective JS files.

The table styles are absolutely the same!