Вот картинка тблицы, по которой пробовал сверстать
вот то что получилось
#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>
);
}