无法创建与示例图一致的React HTML表格，附代码求修正

I can't get my table to match the style of the mockup I'm following. After building it with React, the end result still doesn't look right. Here's my current code:

React Component Code #

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> 
  ); 
}

CSS Styles #

#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; 
}

External Scripts Used #

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

The output from my code doesn't match the expected mockup. Could someone help me fix the table styling to align with the mockup?

内容的提问来源于stack exchange，提问作者Vahan