JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<Table>
    <TR Class="columnHeader">
        <td BorderWidth="0px" BgColor="White"></td>
        <td ColSpan="3" ><Label ID="lbl_Dimension">Dimension in CM</Label></td>
        
        
        <td ColSpan="2" ><Label ID="lbl_Weight">Weight in KG</Label></td>
        <td><Label ID="lbl_Volume">Volume</Label></td>
    </TR>
    <TR Class="columnHeader">
        <td BorderWidth="0px" BgColor="White"></td>
        <td>Length<Label /></td><td>Width<Label /></td><td>Height<Label /></td><td>Gross<Label /></td><td>Net<Label /></td><td>CBM<Label /></td>
    </TR>
    <TR>
        <tdxClass="rowHeader"><Label ID="lbl_Pallet">Pallet</Label></td>
        <td>1<Label/></td><td>1<Label/></td><td>1<Label/></td><td>1<Label/></td><td>1<Label/></td><td>1<Label/></td>
    </TR>
    <TR>
        <td Class="rowHeader"><Label ID="lbl_Master" >Master</Label></td>
        <td>2<Label/></td><td>2<Label/></td><td>2<Label/></td><td>2<Label/></td><td>2<Label/></td><td>2<Label/></td>
    </TR>
    <TR>
        <td Class="rowHeader"><Label ID="lbl_Inner" >Inner</Label></td>
        <td>3<Label/></td><td>3<Label/></td><td>3<Label/></td><td>3<Label/></td><td>3<Label/></td><td>3<Label/></td>
    </TR>  
</Table>

CSS

table
{
    border: 10px solid Black;
    border-spacing: 0;
    margin-top: 30px;
    border-collapse: collapse;
}
.drawBorder th, .drawBorder td
{
    border: 1px solid Black;
    width: 80px;
}
.rowHeader
{
    background-color: #f4e8d0;
    font-weight: bold;
}
.columnHeader
{   
    text-align: center;
    background-color: #f4e8d0;
    border: 1px solid Black;
    font-weight: bold;
}