JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <section id="unseen">    
        <table class="table-bordered table-striped table-condensed productForm" width="100%" cellspacing="0px">
            <thead>
                <tr style="border:solid 1px #FFFFFF;">
                    <th rowspan="2">Photo</th>
                    <th rowspan="2">Part Number<div>/ Description</div> </th>
                    <th rowspan="2">Color <div>/ nm</div></th>
                    <th colspan="3">Luminous Intensity</th>
                    <th rowspan="2">Viewing<br />Angle</th>
                    <th rowspan="2">Data<br />Sheet</th>
                    <th rowspan="2" colspan="2">3D Spec<sup>†</sup></th>
                    <th rowspan="2">Request<br />for Quote</th>
                </tr>
                <tr>
                    <th>Min.</th>
                    <th>Typ.</th>
                    <th>Unit</th>
                </tr>
            </thead>
        </table>
    </section>
</body>

CSS

@media only screen and (max-width: 800px) {
    #unseen table th div {display: none;},
} 
@media only screen and (max-width: 640px) {
    #unseen table tr:first-child th:nth-child(1),
    #unseen table tr:first-child th:nth-child(6),
    #unseen table tr:first-child th:nth-child(7),
    #unseen table tr:first-child th:nth-child(8){display:none;},
}