How do I separate the background styles of the header, body, and footer in a table in html?

I have a design that I need to reproduce. The head and foot are green but the body background needs to be white.

So far, I have tried changing the body background, but it changes the individual rows instead of the actual background. So I’ve settled for this for now. All green background. But I need to fix that.

This is my table markup(using Semantic UI React for certain components):

export default function PaymentHistoryTable(props) {
  const {data, setData, currentRenderData, handleDropdown } = props
  
  const tableBodyHtml = currentRenderData[data.activePage-1].map(item => {
    return (
      <tr className='tableItem' key={item.invoice_ID}>
        <td className='firstCell body2'>{item.invoice_ID}</td>
        <td className='body2'>{item.date}</td>
        <td className='boldNumber'>{currency(item.total)}</td>
        <td className='boldNumber'>{currency(item.amount_paid)}</td>
        <td className='body2'>{currency(item.total - item.amount_paid)}</td>
        <td >
          <div className={item.paid ? "successful" : "pending"}>
            <div className={item.paid ? "circleSuccess" : "circlePending"}></div>
            <p >{item.paid ? "Successful" : "Pending"}</p>
          </div>
        </td>
        <td className='lastCell ' align='right'>
          <a className='viewMoreBtn subtitle2' onClick={()=>console.log(data)}>View more
            <Icon name="chevron right"/>
          </a>
        </td>
      </tr>
    );
  })

  const perPageOptions = [
    { key: '10 items', text: '10 items', value: 10 },
    { key: '15 items', text: '15 items', value: 15 },
    { key: '20 items', text: '20 items', value: 20 },
    { key: '25 items', text: '25 items', value: 25 },
    { key: '30 items', text: '30 items', value: 30 }
  ]

  function handlePaginationChange(e, data) {
    setData((prevData)=>(
      {...prevData, activePage: data.activePage}))
  }

  return (
    <>
      <table>
          <thead className='tableHead'>
            <tr>
              <th className='firstCell body2'>Invoice ID</th>
              <th className='body2'>Date</th>
              <th className='body2'>Total</th>
              <th className='body2'>Amount Paid</th>
              <th className='body2'>Amount Due</th>
              <th className='body2'>Status</th>
              <th className='body2'></th>
            </tr>
          </thead>
            
          <tbody className='tableBody'>
          {tableBodyHtml}
          </tbody>

          <tfoot>
            <tr>
              <td colSpan={2} className='firstCell'>
                <div className='perPageDropdownCont body1'>
                  <Dropdown 
                    selection
                    compact
                    icon="chevron down"
                    id='perPageDropdown'
                    // floating
                    value={data.perPage}
                    options={perPageOptions}
                    name='perPage' 
                    onChange={handleDropdown}
                    />
                  
                  <p>per page</p>
                </div>
              </td>
              <td></td>
              <td></td>
              <td colSpan={3} align='right' className='lastCell paginationContainer'>
                <Pagination
                  id='pagination'
                  boundaryRange={1}
                  disabled ={currentRenderData.length < 2 ? true : false}
                  activePage={data.activePage}
                  ellipsisItem={null}
                  firstItem={null}
                  lastItem={null}
                  siblingRange={1}
                  totalPages={props.currentRenderData.length}
                  onPageChange={handlePaginationChange}
                  prevItem="Previous"
                  nextItem="Next"
                />
              </td>
            </tr>
          </tfoot>
        </table>
    </>
  )
}

And this is my css:

table{
  width: 100%;
  background-color: var(--green-30);

  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24), 0px 0px 48px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  border-spacing: 0px 10px;
}

.tableItem{
  height: 70px;
  background-color: white;
  
  border-width: 0.5px 0px;
  border-style: solid;
  border-color: #D2D2D6;

  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.24)) drop-shadow(0px 0px 32px rgba(0, 0, 0, 0.12));
}

.tableItem>*:not(.firstCell,.lastCell){
  padding: 0;
}

th{
  text-align: left;
}

.firstCell{
  padding: 0 0 0 25px;
}

.lastCell{
  padding: 0 25px 0 0;
}

thead, tfoot {
  background-color: var(--green-30);
  color: white;
}

The lines between cells seems to only show up in Chrome – so I’m not sure if that needs to be fixed as well.

What can I do to fix this color problem?