Не получается сверстать таблицу точностью как на фото

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

#customers, #customers td, #customers tr, #customers th{
    border: 1px solid rgba(220, 220, 220, 0.55);
    border-collapse: collapse;
    color: white;
}

#customers th:first-child{
    width: 161px;
}

#customers th{
    height: 79px;
    width: 81px;
}
.secondHeading{
    display: flex;
    padding: 0;
    border: 0 !important;
}
.secondHeading tr{
    padding: 10px;
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.secondHeading tr:last-child{
    justify-content: center;
    display: flex;
}

.noneBordered{
    border-right: 0 !important;
    border-left: 0 !important;
    text-align: center;
}
.noneBordered:last-child{
    border-left: 1px !important;
}

.headings{
    background: #545662;
}
.headings div p:first-child{
    font-size: 16px;
    line-height: 19px;
}
.headings div p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
    color: #DFDFDF;
}
.quality{
    background-color:#444652 !important;
    width: .7em; 
    width: 1ch; 
    text-align: center; 
    font: Consolas, Monaco, monospace; 
    word-wrap: break-word;
    padding: 40px;
}

.qualityBlock{
    padding: 0;
    border-left: 0 !important;
}
.qualityBlock tr{
    border-left: 0 !important;
}

.secondRow{
    margin-bottom: 20px;
    height: 420px;
    background: #444652;
    padding: 20px;
}

.smallCards{
    display: flex;
    justify-content: space-around;
    height: 79px;   
    background: #383A45;
}

.smcartcap{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.smallitemcard{
    height: 62px;
    width: 62px;
    margin-right: 43px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

import React from 'react';
import { connect } from 'react-redux';
import tableStyles from './table.module.css'
import stoneStyles from './stones.module.css'
import st1 from './images/stimg1.png'
import st2 from './images/stimg2.png'
import diametr from './images/diameter.png'
import './stones.css'
import addimg1 from './images/addimg1.png'
import { IconButton } from '@material-ui/core';
   export default function TablePage(props) {
    return (
        <div className={tableStyles.secondRow}>
            <h4 className={stoneStyles.title}>Группы</h4>
            <table id="customers">
  <tr>
    <th>
    <div className={tableStyles.smallCards}>
        <div className={tableStyles.smcartcap}>
            <img src={st1}/>
            <p className={stoneStyles.title}>белый</p>
        </div>
        <div className={tableStyles.smcartcap}>
            <img src={st2}/>
            <p className={stoneStyles.title}>круглый</p>
        </div>
    </div>
    </th>
    <th className='headings'>
        <div>
            <p>GH-VS</p>
            <p>средний</p>
            <p>супер </p>
        </div>
    </th>
    <th className='headings'>
        <div>
            <p>GH-VS</p>
            <p>средний</p>
            <p>супер </p>
        </div>
    </th>
    <th className='headings'>
        <div>
            <p>GH-VS</p>
            <p>средний</p>
            <p>супер </p>
        </div>
    </th>
    <th className='headings'>
        <div>
            <p>GH-VS</p>
            <p>средний</p>
            <p>супер </p>
        </div>
    </th>
    <th className='headings'>
        <div>
            <p>GH-VS</p>
            <p>средний</p>
            <p>супер </p>
        </div>
    </th>
    <th className='headings'>
        <IconButton  style={{margin:'auto'}} >
            <img src={addimg1}/>
        </IconButton>
    </th>
  </tr>
  <tr>
    <td className='secondHeading'>
        <tr>качество</tr>
        <tr>
            <img src={diametr}/>
        </tr>
    </td>
    <td className='noneBordered'></td>
    <td className='noneBordered'></td>
    <td className='noneBordered'>цена</td>
    <td className='noneBordered'></td>
    <td className='noneBordered'></td>
    <td className='noneBordered'></td>
  </tr>
  <tr>
      <td className='qualityBlock'>
          <tr>
              <p className='quality'>Отличное</p>
          </tr>
          <tr>
            
          </tr>
      </td>
  </tr>
</table>
        </div>
    );
}